MintUI部署安裝 按需引入

2021-09-02 19:17:42 字數 1280 閱讀 3880

1.使用 vue-cli

npm install -g vue-cli


vue init webpack projectname
注意：eslint 是否選擇，根據個人需要。

2. 進入project，安裝mint-ui

cd projectname


npm i mint-ui -s
至此，已經完成安裝。

3. 使用babel，安裝 babel-plugin-component

npm install babel-plugin-component -d
4. 使用ide開啟專案（推薦idea）

5.將 .babelrc 修改為如下內容，全部替換即可。（其中， ["es2015", ],  語句可以刪除，刪除後，步驟6可跳過）

],


["env", 


}],"stage-2"


],"plugins": [


"transform-vue-jsx",


"transform-runtime",


["component", [


]]]}
6.安裝 babel-preset-es2015

npm install babel-preset-es2015
7.在src目錄下，建立mint-ui資料夾，並新增index.js檔案，內容示例如下：（本步驟目的是將所有mint的引入寫在index.js中，非必須步驟，如不執行本步驟，則可將引入寫在main.js中）

import vue from 'vue'


import from 'mint-ui'


vue.component(button.name, button)


vue.component(actionsheet.name, actionsheet)
8.在main.js中，新增如下語句：（如步驟7未執行，則跳過本步驟）

import './mint-ui/index.js'
9.寫乙個測試的vue頁面，測試即可。示例**如下：

primary
最終，執行頁面如下圖。

VUE 爬坑之旅 Mint ui 按需引入

npm error write after endnpm install npm 5.6 0 g plugins component stage 2 plugins transform vue jsx transform runtime env stage 2 plugins transform v...

echarts按需引入

這篇文章只對echarts v4.x 有效 官方更新到v5.x 後 可以檢視官方例項 檢視完整 按需引入 echarts 的完整包太大了，但是在專案中，其實很多都是用不上的，所以按需引入是很有必要的 import echarts from echarts lib echarts import ech...

VUE mint ui按需引入總結

第一步 安裝mint ui 這裡不細說 第二步 執行npm install babel plugin component 文件寫的npm install babel plugin component d,我按文件知道裝了報錯，專案無法編譯，可能是和版本有關係？多次嘗試後把 d刪掉就可以 第三部 修改...