欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue cli快速搭建vue项目

程序员文章站 2022-05-26 10:01:26
...

前期准备工作:

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

2.创建一个vue项目

vue create .

选手动配置

选ESlint+Standard config

vue cli快速搭建vue项目

vue cli快速搭建vue项目

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等

vue cli快速搭建vue项目

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

7.创建环境变量

vue cli快速搭建vue项目

8.安装normalize.css

npm i normalize.css

9.npm i axios nprogress

10.在main.js中引入

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

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

 

相关标签: 项目搭建