vue - vue-cli脚手架安装和webpack-simple模板项目生成

ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 能够快速建立 vue 项目。

GitHub地址是：https://github.com/vuejs/vue-cli

1、安装Nodejs

首先须要安装Node环境。安装完成以后，能够在命令行工具中输入node -v和npm -v,若是能显示出版本号，就说明安装成功。

2、安装vue-cli

安装好node以后，咱们就能够直接全局安装vue-cli:

npm install -g vue-cli

使用这种方式可能会安装比较慢，推荐你们使用国内的淘宝镜像来安装。(以前安装过了就不过多赘述了)

cnpm install -g vue-cli

若是安装失败，可使用 npm cache clean 清理缓存，而后再从新安装。后面的安装过程当中，若有安装失败的状况，也须要先清理缓存

安装完成后，可使用vue -V(大写的V)查看vue的版本。

 

若是接下来你不知道要干吗，那么你能够在命令行中输入

vue -help

它会有如下提示：

 

懂点英语的意思应该能看到提示的信息，聪明的你此时接下来执行vue list看看有哪些可用的官网模板：

vue list

 

 

Vue.js官方提供了两种类型的模板项目：

• 基于vue cli和browserify的项目模板
• 基于vue cli和webpack的项目模板

vue cli是Vue.js官方提供的命令行建立Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和彻底模式，简单模式仅包含基于vue.js开发必要的一些资源和包，使用该模式能够快速地投入到开发。彻底模式则还包括ESLink、单元测试等功能。

咱们在这里使用webpack的项目模板。没有为何，由于webpack有点叼叼的。

咱们今天玩一下webpac-simple 基于webpack的简单模板。

再重申一遍，必定要使用命令行工具切换到你当前的目录下，相似这样

 

3、而后执行：

vue init webpack-simple my-project

init :初始化咱们的项目。

webpack-simple:使用的哪一个模板，这里咱们先使用webpack-simple模板

my-project:表示咱们项目的名字，这名字能够本身命名，但不要起成系统软件的一些名字，好比vue，node，npm等

执行以下命令

vue init webpack-simple my-project

 

 

4、接下来根据提示操做：

切换到当前目前，必定切换进来

cd my-project

下载当前项目所依赖的包

npm install

启动当前的项目

npm run dev

接下来见证奇迹的时刻来了，咱们第一个vue的项目。只要出现以下界面，证实项目启动成功了。