vue cli快速搭建vue项目

前期准备工作：

githup上新建项目，克隆下来，安装npm、node等环境。

1.安装vue cli:

npm install -g @vue/cli

2.安装node-sass淘宝镜像

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

3.vscode插件

ESlint

Vetur:vue代码提示

正式搭建：

1.查看vue cli版本

vue -V

以下步骤为正式搭建步骤，也可以选用vue ui命令（可视化项目管理工具）搭建项目

2.创建一个vue项目

vue create .（.代表创建到当前目录）

选手动配置

选ESlint+Standard config

3.package.json解释

只检查暂存区的文件：

"gitHooks": {

    "pre-commit": "lint-staged"

  }

4.添加element ui

在cmd窗口执行vue add element-ui

5.npm run serve

6.目录结构整理

src->utils工具放这

src->services调接口

assets下建images、icons、styles等

注意：scss文件在编译时确实会耗时长一点

7.创建环境变量

8.安装normalize.css

npm i normalize.css

9.npm i axios nprogress

10.在main.js中引入

import 'normalize.css/normalize.css'
import 'nprogress/nprogress.css'

注意：环境变量的文件修改了是需要重新启动的