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

巴特西

vue爬坑之路（插件安装）

2. 安装express-generator生成器

3. 创建一个express项目

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

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

最新文章

热门文章