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