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;

}