1、检查node环境
在安装vue的环境之前,安装NodeJS环境是必须的。可以使用node -v指令检查;
上面的版本是6.02.0的;
2、安装vue-cli
接下来进入正题,先全局安装vue-cli,使用指令npm install -g vue-cli;
用vue指令检查是否安装成功,出现以下界面则表示安装成功:
3、初始化项目
先cd到自己向要创建新项目的文件夹下,然后使用VUe init指令(vue init 模板类型 项目名称)vue的模板类型有很多种,可以使用vue list指令查看,如下图:
我们这里使用webpack模板,项目名叫sell,所以指令如下:
Vue init webpack sell
然后可以一路回车下去;结果如下图:
接下来进入sell文件夹,运行npm install指令,会发现项目中多了一个node_modules文件夹
4、运行Vue环境
接下来使用 npm run dev命令运行项目环境,效果如下:
这里显示了已经监听了8080端口,接下来在浏览器访问http://localhost:8080/
会看到如下页面:
生成的脚手架目录如下:
以上是Vue脚手架的基本的目录结构,我们一般编写代码都放在src目录下,这里有一个components文件夹,该目录用于存在自定义组件。src目录小还有一个App.vue,该文件是项目展示的窗口文件。