如何初始化一个vue项目

安装vue-cli脚手架工具
npm i -g vue-cli

• 查看vue是否安装成功及版本号vue -V

使用vue-cli初始化项目

• vue init webpack project-name (vue init是vue-cli的命令，webpack是项目使用的模板模型，project-name是项目名称)
• 之后根据自己项目所需进行enter操作

vue安装jQuery

• npm i jquery -S
• 在module.exports = {} 最后添加plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), 　　new webpack.ProvidePlugin({ 　　　　jQuery: "jquery", 　　　　$: "jquery" 　　}) ]
  • 如果项目使用了eslint，需要在.eslintrc.js文件中的module.exports的env对象里面加上jquery: true
  • 不需要再main.js引入，在对应的.vue文件里面直接使用即可

vue安装bootstrap

• npm i bootstrap -S或者分两步走npm i bootstrap --save，npm i popper.js --save
• 在main.js中引入 import $ from 'jquery'，import 'bootstrap/dist/css/bootstrap.min.css' ，import 'bootstrap/dist/js/bootstrap.min'

安装Popper.js
安装sass-loader

• npm install sass-loader --save，在安装node-sass，因为sass-loader依赖于node-sass，npm i node-sass --save
• 在webpack.base.conf.js文件中添加如下代码{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }
• 直接使用即可

Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work.

• npm run dev 是开发环境
• npm run build 是生产环境
• build后生成的dist下面的代码，必须要在服务器根目录下面才能打开，否则就会报这个错误
• 可以通过在webpack.prod.conf.js的output对象添加一个属性：publicPath: './'
• 使用http-server

scss使用全局公共样式变量

• 安装sass-resources-loadernpm i sass-resources-loader --save
• 在vue项目的根目录下面的static新建一个文件夹style，下面新建一个公共scss文件，common.scss
• 修改build/util.js文件，
• 直接使用common.scss里面的变量样式即可
• 多个公共文件，resources使用数组

node-sass安装失败的解决方案

• npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
• 在webpack.base.conf.js的module的rules中添加{ test: /\.sass$/, loaders: ['style', 'css', 'sass'] }

项目中使用iconfont

• 下载相应的iconfont到本地
• 在main.js中引入iconfont.css文件
• 项目中直接使用即可

改变router-link选中颜色的两种方式

• <router-link to="/" active-class="active"></router-link>
• 在router/index.js文件中进行配置，export default new Router({ linkActiveClass: 'active' })