自己实战整理的步骤,可以轻松构建vue全家桶项目

(本文省去前面node安装,脚手架安装过程,只针对搭建项目的过程)

一、创建项目

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

babel转译js的新特性,兼容低版本浏览器

CSS预处理器,设置全局变量

ESLint检查代码写法是否规范

vue3.0脚手架新建项目

2.指令:cd vue-manager-system

3.指令:npm run serve

 

二、配置项目的基本环境

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

2.打开vscode的设置

vscode配置环境

 

3.选择扩展中的ESLint,之后点击在setting.json中编辑

添加配置:

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;

}

 

 

 

Logo

前往低代码交流专区

更多推荐