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

字数 326阅读 139

记录一下用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

推荐阅读更多精彩内容