vue-cli生成vue项目

全局安装 vue-cli

1.$ cnpm install –global vue-cli

如果已经安装过了就不用安装了，这里我前面的项目已经安装过了，所以直接从第二步开始

my-project为自定义项目名

2.$ vue init webpack my-project

需要注意的是项目的名称不能大写，不然会报错

项目初始化时会询问一些安装项，可以根据自己的需求选择

Project name (my-project) ==>项目名称（我的项目）

Project description (A Vue.js project) ==>项目描述一个Vue.js 项目

Author 作者（你的名字）

nstall vue-router? (Y/n) ==>是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）yes

Use ESLint to lint your code? (Y/n) ==>使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）此处建议选no，如果不是按照ESLint风格，编译时就会报错（不熟悉这套规范的就不要用，否则你会很难受）

Pick an ESLint preset (Use arrow keys) ==>选择一个预置ESLint（使用箭头键）

Setup unit tests with Karma + Mocha? (Y/n) ==>设置单元测Karma + Mocha？ （Y/ N）

Setup e2e tests with Nightwatch? (Y/n) ==>设置端到端测试，Nightwatch？这里需要选yes，否则会报websocket的错误 （Y/ N）Y

3.最后一步就是安心等待啦

完成后运行npm run Dev项目就运行起来啦

注：

Vue取消eslint语法限制

在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则

手机预览

1 2 3 4

<!-- 手机预览vue项目 --> <!-- 1.找到config文件下的index.js 将dev配置中的host:'localhost'改为host:'0.0.0.0' --> <!-- 2.重新运行项目npm run dev --> <!-- 3.在浏览器地址输入：本机ip地址:项目所占端口号 如：http://192.168.1.184:8080/#/-->

 

npm run build 打包

 

注意执行npm run build 打包时要修改config/index.js文件的build配置项assetsPublicPath: '/',为assetsPublicPath: './',

 

安装loader

以上全部完成你就可以开始安装loader了，先安装个loader（npm i loader -s）然后按照项目的需求你可以安装less-loader,css-loader,vux-loader等等loader

例如安装使用sass

npm install sass-loader@7.3.1 --save-dev（高版本的可能不适配，建议安装npm install sass-loader@7.3.1 --save-dev 安装低版本的）

npm install node-sass --save

npm install style-loader --save