用vue-cli构建一个项目步骤记录

记录一下用vue-cli构建项目的配置过程。

1、全局安装webpack和vue-cli

npm执行三条命令：

npm install webpack -g

npm install webpack-cli -g 

npm install --global vue-cli 

2、构建项目

在D盘新建一个文件夹，命令行cd进入目录；
执行命令

vue init webpack project

这里的project是你自定义的项目名，注意项目名不要用大写，原因可参考阮一峰老师的这篇博文：http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html
完成后，会多出一个project文件夹，进入文件夹，执行npm install命令。

npm install

看一下现在的目录结构：

image.png

我们主要用的是src源码目录，其中assets是放资源文件的目录，compontents放组件，router放路由，App.vue是页面级组件，main.js是入口文件。

3、启动项目

打开http://127.0.0.1:8080

image.png

如果8080端口被占用，则修改config文件夹下的index.js文件，修改端口。

image.png
我们在src目录写源码，打包时执行npm run build进行打包，打包后发现多出来一个dist目录，打包后的文件都在这个目录下。

npm run build

4、安装调试工具vue-devtools

可以翻墙安装；不翻墙的可以手动安装。
首先克隆github上的项目：

git clone https://github.com/vuejs/vue-devtools.git

然后进入项目目录，执行npm install

npm install

build：

npm run build

谷歌进入chrome://extensions，加载已解压的拓展程序。

image.png
image.png
成功：
image.png