脚手架方式搭建vue项目
一、首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了。
搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一项——“在此处打开命令窗口”字样,点击就会出来,如图所示:

此位置就自动是你要创建项目的位置(当然,如果你想再创建文件夹,放在其他位置的话也可以直接输入打开命令npm cd+名字)。
在这里你可以检查一下,如下图的话你就算成功了!

二、安装vue脚手架
输入命令:npm install -g vue-cli
执行完之后,若不知道是否安装成功可以检验一下:vue -V(此处的-V是大写的!要注意),出现如下结果就是成功了:

三、创建项目
输入命令:vue init webpack +项目名称
如图所示,

结束之后,就是搭建完成,输入命令:cd +项目名称(此时在打开你刚刚创建的项目,进入到项目中运行);
再输入命令:npm run dev 运行项目。
也可以按照以下他告诉你的步骤,

完成之后就会出现:

之后,按照他告诉你的地址在浏览器中打开就可以了。(出现如下页面)

目录结构及含义如下:

脚手架方式搭建vue项目的更多相关文章
- 使用yarn搭建vue项目
今天尝试了一下用yarn的方式搭建vue项目,方法其实是和npm的用法一样.但是在创建过程中报错了.现在整理一下,便于后期查错时使用. 以windows系统为例 1.全局安装yarn,三种方式 官网上 ...
- 利用VUE-CLI脚手架搭建VUE项目
前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...
- 搭建vue项目环境
前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- Mac中如何搭建Vue项目并利用VSCode开发
(一)部署Node环境 (1)下载适合Mac环境的Node包,点击进入下载页面 (2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.j ...
- 手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...
- 快速搭建Vue项目
快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...
- Visual code 搭建Vue项目
使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像 淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
随机推荐
- python中os模块在windows下的使用
今天学习了一下Python的os模块,主要是针对文件夹和文件路径的一系列操作. 与Python内置函数相比这里这里的函数功能更多样化,功能也更强大.但是学习过程中我发现很多函数都是只适用于unix系统 ...
- PhoneGap和Cordova应该用哪一个?
就目前来看,cordova是一个移动应用开发框架,你基于这个东西可以用网页代码作出APP.Phonegap Build是一个在线打包工具,你把使用cordova写好的项目给Phonegap Build ...
- MacOS 系统终端上传文件到 linux 服务器
使用scp: scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速 ...
- IntelliJ IDEA入门系列
1.Java Web之Helloworld配置 2.Java Web之Maven搭建Helloworld 3.Java Web之Spring MVC简单管理系统
- 【js高程学习笔记】关于变量值和函数参数
变量包含了两种不同类型的值: 基本类型 (Undefined.null.Boolean.Number.string都属于基本类型) 引用类型 (对象) 两种值在赋值上不同的是: 将一个引用类型的值(对 ...
- 字符串及其操作,字符的Unicode编码
plainText=input('message:') for c in plainText: print(chr(ord(c)-3),end='') plainText=input('message ...
- LVM逻辑卷扩容、缩容
LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理. 后期出现问题恢复数据也比较麻烦. 概念: ①PE(P ...
- Java中Json字符串转换为对象的方法(多层List集合)
借鉴自:http://www.jb51.net/article/91142.htm 在将json字符串转换成对象flightInfo时,当flightInfo对象中有List<flightCla ...
- 递归与动态规划II-汉诺塔
题目描述 有一个int数组arr其中只含有1.2和3,分别代表所有圆盘目前的状态,1代表左柱,2代表中柱,3代表右柱,arr[i]的值代表第i+1个圆盘的位置.比如,arr=[3,3,2,1],代表第 ...
- oraclesql语句笔记
1. ORA-00947:Not enough values 原因:values没有写足够的值与select()中的字段对应 2.查看一张表中共有多少个字段 select count(*) from ...