zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    codeforces C. Cows and Sequence 解题报告
    codeforces A. Point on Spiral 解题报告
    codeforces C. New Year Ratings Change 解题报告
    codeforces A. Fox and Box Accumulation 解题报告
    codeforces B. Multitasking 解题报告
    git命令使用
    shell简单使用
    知识束缚
    php 调用系统命令
    数据传输方式(前端与后台 ,后台与后台)
  • 原文地址:https://www.cnblogs.com/ToBeBest/p/9523859.html
Copyright © 2011-2022 走看看