vue爬坑之路（插件安装）

npm install vue-table-with-tree-grid --save

import ZkTable from 'vue-table-with-tree-grid'

Vue.use(ZkTable)

 

npm install vue2-editor --save-dev

npm install wangeditor --save-dev

npm install axios --save-dev

安装样式

less

npm install less less-loader --save-dev

scss

npm install sass node-sass sass-loader -D

全局引用sass

npm install sass-resources-loader --save-dev

npm install vue-style-loader --save-dev

在build/utils.js文件的exports.cssLoaders函数内添加如下代码：

 

exports.cssLoaders = function (options) {
    // ...

    function generateSassResourceLoader () {
        var loaders = [
            cssLoader,
            postcssLoader, px2remLoader, // 若需要则加上这一行，不用就不加
            'sass-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/common/scss/variable.scss'),
                        path.resolve(__dirname, '../src/common/scss/mixins.scss')
                    ]
                }
            }
        ]
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

    // ...

    return {
        // ...
        sass: generateSassResourceLoader(), // 替换原来的，下同
        scss: generateSassResourceLoader(),
        // ...
    }
}

 如果需要修改iview的主题,这部分可以做如下修改

function generateSassResourceLoader () {
    var loaders = [
      cssLoader,
      {
        loader: 'less-loader',
        options: {
          javascriptEnabled: true
        }
      },
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/assets/less/_theme.less'),
            path.resolve(__dirname, '../src/assets/less/_mixins.less')
          ]
        }
      }
    ]
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

引入iview部分做如下修改

import Vue from 'vue'
import 'iview/dist/styles/iview.css'
import '../../my-theme/index.less'

其它参考官方文档即可.可参考文章: 文章一 文章二

分离css打包

npm install extract-text-webpack-plugin --save-dev

参考：https://www.jianshu.com/p/439764e3eff2

引用cookie

npm install vue-cookie --save

main.js文件中修改

import VueCookie from 'vue-cookie'

Vue.use(VueCookie)

使用

this.$cookie

 

axios 封装

npm install axios --save

工具函数

npm install --save lodash

本地缓存插件
npm install lockr --save-dev

CORS跨域访问解决技术

https://www.cnblogs.com/loveis715/p/4592246.html

 http://www.php.cn/js-tutorial-386108.html

滚动条

npm install vue-scroll --save-dev

import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css';

Vue.use(vuescroll);

http://vuescrolljs.yvescoding.org/zh/guide/getting-started.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
http://vuescrolljs.yvescoding.org/zh/guide/slot.html#%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0-%E4%B8%8A%E6%8E%A8%E5%8A%A0%E8%BD%BD

 第三方插件分离打包

1.webpack.base.conf.js中添加入口(以echarts为例说明)

　　entry: {

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

　　　　echarts: ['echarts'] // 添加这一行

　　}

2.webpack.prop.conf.js中分离打包(以echarts为例说明)

　　new webpack.optimize.CommonsChunkPlugin({

　　　　name: 'vendor',

　　　　minChunks (module) {

　　　　　　// any required modules inside node_modules are extracted to vendor

　　　　　　return (

　　　　　　　　module.resource &&

　　　　　　　　/\.js$/.test(module.resource) &&

　　　　　　　　module.resource.indexOf(

　　　　　　　　　　path.join(__dirname, '../node_modules')

　　　　　　　　) === 0

　　　　　　)

　　　　},

　　　　chunks: ['app']

　　}),

　　new webpack.optimize.CommonsChunkPlugin({

　　　　name: 'echarts',

　　　　chunks: ['vendor'],

　　　　minChunks (module) {

　　　　　　return (

　　　　　　　　module.resource &&

　　　　　　　　/\.js$/.test(module.resource) &&

　　　　　　　　(/echarts/).test(module.resource)

　　　　　　)

　　　　}

　　}),

这样就可以将echarts从vendor中拆分出来了,vendor和echarts的体积都不会很大,速度不会受到很大的影响

 

 

webpack打包vue项目之后生成的dist文件该怎么启动运行

2. 安装express-generator生成器

执行  $ npm install express-generator -g  进行安装

3. 创建一个express项目

执行  $ express expressDemo （expressDemo是项目名）

4. 进入expressDemo目录，安装项目依赖

 $ cd expressDemo                                                                               

 $ npm install  

5. 把dist目录下的所有文件复制到express项目的public文件夹下

然后运行 $ npm start 启动expressDemo

打开浏览器，输入 http://localhost:3000 , 就可以看到效果了

参考：https://blog.csdn.net/u014054437/article/details/79981307

http://webpack.css88.com/guides/asset-management.html