vux 項目的構建

 

一：vux安裝

# 安裝vux
cnpm install vux --save

 

# 安裝vux-loader
cnpm install vux-loader --save-dev

 

# 安裝less-loader（用以編譯less源碼，不然會出現 ' Cannot GET / '）
npm install less less-loader --save-dev

 

二：vux 配置

在 webpack.base.conf.js 文件中

a，修改

module.exports
改成：
var originalConfig

b，修改

extensions: ['.js', '.vue', '.json'],
改成：
extensions: ['.js', '.vue', '.json','.less'],

c，在文件末尾添加以下代碼

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

保存文件，配置完成

三：vue eslint 代碼自動格式化

vue-cli 代碼風格遵循了 JavaScript Standard Style 代碼檢查規範。

a，安裝

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

b，在項目文件 .eslintrc.js 添加以下代碼

  plugins: [
    'vue'
  ],

c，在vscode開發環境中，在項目路徑中 ，例： D:\vux\vux-bpm\.vscode\settings.json 添加以下代碼

{
"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],
}

配置完成後，按ctr + s，vscode會自動化幫咱們格式化代碼。