[color=#00b050]学 vue 的看过来，

vue-cli 挺好用的，但是遇到具体情况还得做一部分调整和配置

默认你已经成功启动 vue-cli

1.使用 scss

cnpm i node-sass sass-loader -D

webpack.base.config.js 里面加

{

test: /.scss$/,

loaders: ["style", "css", "sass"]

},

2.vuex 在ie中不兼容

cnpm i babel-polyfill -D

webpack.base.config.js 里面改

entry: {

app: ['babel-polyfill','./src/main.js']

},

3.图片引入问题

在 utils.js 找到 ExtractTextPlugin.extract

加 publicPath:'../../'

<img src="./a.jpg" alt="">

<img :src="{item}" alt="">

背景图 得用require('./a.jpg')

至于放在static里面，如果项目上线后不是放在根目录，会出错

4.vue-router 异步加载组件

路由里面写

{

path: '*',

component: resolve => require(['@/components/index/index'],resolve)

}

在 webpack.prod.conf.js 找到 chunkFilename

改 chunk[id]

防止出现 0.js 1.js 改后变成 chunk0.js

5.模拟数据

dev-server.js 里面借用 node 的 express

6.取消map，减轻打包量

在 config/index.js

productionSourceMap: false,

7.反向代理 

在 config/index.js

proxyTable: {

'/api': {

target: '',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

},

为什么用，你做了就知道了

8.引入奥森字体

import './assets/css/font-awesome.min.css'

assets/css

assets/fonts

css 和 fonts 在同一级目录

和以前用法一致，

9.定义全局公用方法

引入自定义的 ajax 绑定到全局 vue 上

import * as myapi from './assets/js/utils.js'

Object.defineProperty(Vue.prototype, '$ajax', { value: myapi.ajax });

10.配置打包后资源路径

在 config/index.js 改

assetsPublicPath: '/' 根目录

assetsPublicPath: './' 本地

assetsPublicPath: '${ctx}${themes_path}/' java代码

assetsPublicPath: '' dist

assetsPublicPath: 'www.aa.com/a/b/c/d' 层层嵌套的

看打包后项目放的路径

11.pc端用 element ui框架

按需引入 element 里面的单独的组件，否则全部引入有点大

cnpm i babel-plugin-component -D

.babelrc 配置

"plugins": ["transform-runtime",['component',[

{

"libraryName": "element-ui",

"styleLibraryName": "theme-default"

}

]]],

替换主题

去官网找，然后把下载的主题替换 node_modules 里面的 _element-ui/@1.4.2@element-ui/lib 里面的 theme-default

然后重新 npm start

12.移动端用 vux ui框架

初始化

cnpm install vue-cli -g

vue init airyland/vux2 youProjectName

cd youProjectName

npm install

npm run dev

vux 用的是less 不用配置就可以单独引入某个组件而不是整体

13.数据操作

lodash 在各个组件中可以单独引入，不用配置

天生的函数操作库，随便用

14.可配置

在 webpack.base.config.js 里面

resolve: {

// 需要忽略的后缀

extensions: ['.js', '.vue', '.json', '.css'],

// 别名，就是很长的路径用一个变量代替

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src')

}

},

{

test: /.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

// 10kb 以下的图片被编译成base64格式，可修改

limit: 10000,

// 自动生成一个7位数的hash，可去掉

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

[/color][color=#00b0f0][/color]

箭头函数才可以用this 不然需要在函数外先定义变量把this赋值给变量。