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 node-sass@4.14.1 --save
npm install sass-loader@8.0.0 --save

// 注：node-sass和sass-loader安裝需要制定版本，版本太高會不兼容，指定版本如安裝不成功自行百度解決辦法

安裝成功后在package.json文件中查看

四、替換src目錄文件

1. 將新建的項目中的src文件里邊的內容全部刪掉；

2. 將之前hbuilder創建的項目中的文件拷貝到新建項目的src目錄
   

五、修改部分文件

由於之前在項目中引用了sacc和less兩種css預處理器，在vue-cli中兩種會沖突，所以需要把之前用到的less處理器的文件給修改為sass處理器。(以后開發uni-app項目只用sass即可，uni-app的插件市場的插件基本也都是使用的sass)

1. 將common目錄下的page.less文件修改為page.scss
   

2. 將app.vue文件引用的page.less改為page.scss
   

3. 檢查其他vue文件的樣式聲明（主要是pages目錄下的頁面）
   

如lang="less"都需要改為lang="sass"

六、運行項目

npm run serve

七、項目打包

npm run build

八、總結

​ 由於安全管控app的子app較多，不需要一個一個創建，可創建一個標准的空項目，以該項目的package.json文件的依賴包為准，其他項目直接拷貝安裝就行（保證各app的依賴包版本統一）。

1. 創建項目文件夾，拷貝標准項目模版，只拷貝紅框內的文件。
   
2. 替換src文件內容。
3. 執行npm install安裝依賴包。
4. 執行npm run serve運行項目。
5. 執行npm run build打包項目。