vue-cli + webpack + iview 建項目步驟


         該步驟基於https://www.iviewui.com/docs/guide/install 定制主題

  1. C:\Users\Administrator> cnpm  i  vue-cli  -g
  2. F:\iview-demos> vue  init  webpack  demo1
  3. F:\iview-demos\demo1> cnpm  install  iview  --save
  4. F:\iview-demos\demo1> cnpm  i   less  style-loader  css-loader  less-loader  -D
  5. F:\iview-demos\demo1> cnpm  install  iview-loader  --save-dev
  6. 在build/webpack.base.conf.js中的extensions 
    1  resolve: {
    2     extensions: ['.js', '.vue', '.json'],
    3     alias: {
    4       'vue$': 'vue/dist/vue.esm.js',
    5       '@': resolve('src'),
    6     }
    7   },

    需要增加一個.less:

    1  resolve: {
    2     extensions: ['.js', '.vue', '.json', '.less'],
    3     alias: {
    4       'vue$': 'vue/dist/vue.esm.js',
    5       '@': resolve('src'),
    6     }
    7   },
  7. 在build/webpack.base.conf.js中的module, 改寫平時 vue-loader 的配置,如下:
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        options: {
                            
                        }
                    },
                    {
                        loader: 'iview-loader',
                        options: {
                            prefix: false
                        }
                    }
                ]
            }
        ]
    }
  8. F:\iview-demos\demo1> cnpm  init
  9. F:\iview-demos\demo1> cnpm  run dev


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM