用vue-cli构建一个项目步骤记录
2018-08-24 本文已影响0人
罂粟1995
记录一下用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
