vue3.0搭建後臺管理系統——新建項目並配置環境

自己實戰整理的步驟，可以輕鬆構建vue全家桶項目

（本文省去前面node安裝,腳手架安裝過程，只針對搭建項目的過程）

一、創建項目

1.指令：vue create vue-manager-system

babel轉譯js的新特性，兼容低版本瀏覽器

CSS預處理器，設置全局變量

ESLint檢查代碼寫法是否規範

2.指令：cd vue-manager-system

3.指令：npm run serve

 

二、配置項目的基本環境

1.vscode下載 ESlint , Prettier , Vetur 插件

2.打開vscode的設置

 

3.選擇擴展中的ESLint，之後點擊在setting.json中編輯

添加配置：

 

 

 

 

 

 

4.自定義規則，在 .eslintrc 中覆蓋prettier規則

5.配置完成後可運行 npm run lint 自動格式化代碼

6.調整項目結構，刪除多餘代碼

7.配置scss全局變量

a.新建 _variable.scss 文件,新建全局變量theme-color

$theme-color:#33aef0;

b.引入reset.scss文件，在main.js裏面導入

c.在 vue.config.js 文件進行如下配置

 

        d.使用全局變量

#app {

color: $theme-color;

}