vue+webpack 實現元件按需引入
阿新 • • 發佈:2019-02-12
1、安裝依賴包
1 | $ npm install --save-dev babel-preset-es2015 |
ps:babel-loader、babel-core應該是預設裝好的,如果沒有安裝,請重新安裝
2、修改【webpack.base.conf.js】配置檔案
找到 /\.js$/
的rules,進行修改
12345678910 | { test: /\.js$/, use: [{ loader: 'babel-loader' , options: { presets: [ 'es2015' ] } }], exclude: /node_modules/ } |
3、根目錄下【.babelrc】檔案
檔案內容:
123 | { ["env", { "modules": false }], |
我自己的
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], ["es2015", { "modules": false }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, { "libraryName": "mint-ui", "style": true } ] ] ]}檢視
注: Element-ui 引入一個功能時 可能需要按需引入2個元件 自己留意檢視即可
mint ui 註冊元件時 只能用component 例如 Vue.component(Button.name,Button)
執行檢視指令碼檢視效果,指令視情況而定
1 | $ npm run dev |