vue-cli构建项目

1.安装

npm install --global vue-cli

2.创建工程

vue init webpack vuetest

webpack是模板，还有其他的官网有介绍，webpack的应该是使用最多的了；vuetest是项目文件夹名；
后面会依次让输入选择
项目名称：不能输入中文，符合URL-friendly ；

WechatIMG1263.jpeg

项目描述：可以输入中文了

projectDesc.jpeg

作者：

author.jpeg

选择构建方式：
建议第一个，运行+编译 省事；

build.jpeg

是否使用vue-router（vue路由）：

router.jpeg

是否使用ESLint（代码检测，统一风格）：

eslint.jpeg

是否使用unit tests（单元测试）：

unitTest.jpeg

是否使用e2e tests with Nightwatch（自动化测试）：

e2eTest.jpeg

选择安装依赖方式：

install.jpeg

提供npm yarn两种；选择这俩后会自动安装；自行安装的话就选最后一个喽；

大功告成，等待安装就ok了！

all.jpeg

3.项目目录介绍

WechatIMG1274.jpeg

build+config是webpack的配置文件；

dist是打包后的文件夹；

src是项目代码，代码都写在这个文件夹下；

static是放一些静态都文件，打包的时候会原装不动的copy到工程中；

package.json 是npm的配置文件；

[email protected]

name,description,author对应创建工程时输入的内容；
script是可执行的操作dev+start是开发时使用，检测到代码变化浏览器会自动刷新，具体功能配置需要查看webpack的配置；
build是打包命令，项目编译完成后会生成dist文件夹；
使用方法：npm run dev/start/build;

package-lock.json是npm5做的一个优化，加快了npm下载的速度

.gitignore是git的配置文件；

[email protected]

需要git忽略的文件夹写在这个下；
默认忽略了dist文件夹，需要删掉/dist/才可以被git检测到打包后的代码；

其他

关于scss，sass

webpack里已经配置好了scss sass，只需要安装下依赖就可以使用了；

npm install node-sass --save-dev
npm install sass-loader --save-dev

内联写好声明 lang="scss" 外联直接创建.scss .sass;

[email protected]

webpack的一些“坑”？

1.打包后的路径有问题，需要引入的css js 图片统统找不到，

1518685197470.jpg

不过问题不大，改一下webpack的路径配置就好；

1518685099086.jpg

2.web sever端口

web sever默认的端口是8080，很多工具默认的都是8080，建议修改下避免冲突；

[email protected]