Uni-app工程轉vue-cli工程步驟
阿新 • • 發佈：2020-12-07
Uni-app工程轉vue-cli工程步驟
一、全域性安裝vue-cli
// 安裝之前需要安裝node,npm,安裝方法自行百度
npm install -g @vue/cli
二、建立一個空的uni-app工程
//使用正式版（對應HBuilderX最新正式版），my-project專案名稱不支援駝峰式命名
vue create -p dcloudio/uni-preset-vue my-project
//執行命令會先安裝uni-app的外掛，外掛安裝完成後，會提示選擇專案模板,可選擇預設模版
安裝完成後的目錄結構：
三、安裝sass
npm install [email protected] --save npm install [email protected] --save // 注：node-sass和sass-loader安裝需要制定版本，版本太高會不相容，指定版本如安裝不成功自行百度解決辦法
安裝成功後在package.json檔案中檢視
四、替換src目錄檔案
-
將新建的專案中的src檔案裡邊的內容全部刪掉；
-
將之前hbuilder建立的專案中的檔案拷貝到新建專案的src目錄
五、修改部分檔案
由於之前在專案中引用了sacc和less兩種css前處理器，在vue-cli中兩種會衝突，所以需要把之前用到的less處理器的檔案給修改為sass處理器。(以後開發uni-app專案只用sass即可，uni-app的外掛市場的外掛基本也都是使用的sass)
-
將common目錄下的page.less檔案修改為page.scss
-
將app.vue檔案引用的page.less改為page.scss
-
檢查其他vue檔案的樣式宣告（主要是pages目錄下的頁面）
如lang="less"都需要改為lang="sass"
六、執行專案
npm run serve
七、專案打包
npm run build
八、總結
由於安全管控app的子app較多，不需要一個一個建立，可建立一個標準的空專案，以該專案的package.json檔案的依賴包為準，其他專案直接拷貝安裝就行（保證各app的依賴包版本統一）。
- 建立專案資料夾，拷貝標準專案模版，只拷貝紅框內的檔案。
- 替換src檔案內容。
- 執行npm install安裝依賴包。
- 執行npm run serve執行專案。
- 執行nom run build打包專案。