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