vue-cli 4 创建vue3.0项目

---

安装环境

1.下载安装node

2.安装vue-cli 命令
   npm install -g @vue/cli （更新：npm update -g @vue/cli）

---

一、创建一个项目

1.运行命令 vue create

vue create hello-world

可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，直接选第一项或者第二项，静静等待 vue 初始化项目,这里我们选择第三项手动选择功能

• Default ([Vue 2] babel,eslint) 默认套餐Vue2，提供 babel 和 eslint 支持
• Default (Vue 3 Preview)([Vue 3] babel,eslint) 默认套餐Vue3预览版，提供 babel 和 eslint 支持
• Manually select features 手动选择功能

2.选择更多的功能支持

使用方向键在特性选项之间切换，使用空格键选中当前特性，当前选择如下,回车进入下一步

• Choose Vue version 选择 Vue版本
• Babel 高阶语法转换
• TypeScript 使用 TypeScript 书写源码
• Progressive Web App (PWA) Support 先进的web app支持，多用于移动端交互 PWA
• Router 路由 vue-router
• Vuex 状态管理模式 store
• CSS Pre-processors CSS 预处理器
• Linter / Formatter CSS 代码风格检查和格式化
• Unit Testing 单元测试
• E2E Testing E2E 测试

3.选择Vue版本

使用方向键在特性选项之间切换，2.x表示vue2.0， 3.x 表示vue3.0，这里选择vue3.0回车进入下一步

4.是否使用history router

• Yes url 不会有 #，还需要服务器那边再进行设置
• No url 会有 #

vue-router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由，这里选择Yes

5.选择css预处理器

• Sass/SCSS(with dart-sass) 需要保存后才会生效(sass 官方目前主力推dart-sass)
• Sass/SCSS(with node-sass) 自动编译实时的
• Less
• Stylus

根据个人选择，这里选择Stylus

6.ESLint 代码验证规则

• ESLint with error prevention only 只有错误预防
• ESLint + Airbnb config 采用airbnb规范
• ESLint + Standard config ESLint 标准配置属性
• ESLint + Prettier 更漂亮的，代码风格更严格统一

这里选择第三项

6.ESLint 什么时候验证

• Lint on save 保存时验证
• Lint and fix on commit fix 和commit 时验证

这里选择保存时验证

6.选择配置文件的位置

• In dedicated config files 对于 Babel 、 ESLint 等，都有自己的配置文件
• In package.json 统一放在package.json文件中

这里选择第一项

7.是否保存配置

这里输入N 回车

8.启动项目

在浏览器中打开 http://localhost:8081/

二、项目目录结构

├── public # 静态资源
├── src # 项目代码
│   ├── api # 全局api
│   ├── assets # 静态资源
│   ├── cache # web-storage-cache配置
│   ├── components # 组件
│   ├── router # 路由配置
│   ├── store # 状态管理
│   ├── directive # 指令
│   ├── axios # axios配置
│   ├── views # 所有页面
│   │   ├── layout # layout公共布局
│   │   └── use r# 登录注册页
│   ├── App.vue # 入口页面
│   ├── main.js # 入口文件 加载组件 初始化等
│   ├── permission.js # 权限管理
│   ├── styles # 样式
│   └── utils # 工具类
├── .eslintrc.js # eslint 配置项
├── babel.config.js # babel配置文件
├── package.json # package.json
└── vue.config # vue-cli 配置