vue学习过程的个人笔记--项目生成

我学习和使用angular也有两年了。期间也接触过react，vue，简单地学习过。现在也想好好学一下vue，于是我在这里记录一下学习的大概过程。

安装vue-cli

之前用嵌入script标签的方式撸过一遍vue的一些特性，包括vue-router。这里我使用vue-cli的方式来安装一下。

npm install --global vue-cli

生成vue项目

vue init webpack vuecms

命令中的webpack是指生成一个基于webpack的项目。
vue-cli生成项目过程的最后一个会提示你选择是否自动执行npm install，我选择了yes，或者cd到项目目录下运行npm install安装依赖也可以。安装依赖的时间有点长，请耐心等待！

启动vue项目

npm start

该命令会执行npm run dev，默认端口是8080，我个人喜欢改端口，在dev脚本后加上–port=3200即可。

打包vue项目

npm run build

运行该命令后，会执行build.js。webpack的配置文件主要涉及build和config两个目录，后面修改这两个目录中的文件应该可以进行定制。

我们build项目之后，直接把index.html拖到浏览器中是不可以访问的。要么放在服务器上进行访问，要么就是使用http-server进行测试。

npm install -g http-server

安装http-server后，我们cd到dist目录下，启动http-sever

// 键入这个命令即可启动http-server服务
http-server

然后我们就可以通过http://127.0.0.1:8080/index.html访问打包后的项目了。