选择默认Lint on save，回车，出现下面问题：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)你更喜欢在哪里放置 Babel、ESLint 等的配置？（使用箭头键）

In dedicated config files =》 每项配置有单独的文件

In package.json =》在package.json 文件中

选择这些配置文件时单独存放，还是直接存放在package.json文件里。这里选择放在单独的文件里（In dedicated config files）。

Save this as a preset for future projects? (y/N)

最后一个问题，

Save this as a preset for future project? =>是否为保存配置习惯文件，存了后下次新建新项目选择配置时就会有此选项了。这里选择不用(n)。

系统自动完成Creating project 建立项目名：tstest，支持使用TypeScript进行开发 Vue3 的代码

Vue CLI v5.0.8
✨  Creating project in C:\00program\vue\vuelearn\tstest.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...added 753 packages in 12s
🚀  Invoking generators...
📦  Installing additional dependencies...added 128 packages in 6s
⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project tstest.
👉  Get started with the following commands:$ cd tstest$ npm run serve

增加typescipt

• 输入：vue add typescript

📦  Installing @vue/cli-plugin-typescript...
up to date in 1s
✔  Successfully installed plugin: @vue/cli-plugin-typescript? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Convert all .js files to .ts? No
? Allow .js files to be compiled? Yes
? Skip type checking of all declaration files (recommended for apps)? No🚀  Invoking generator for @vue/cli-plugin-typescript...
⚓  Running completion hooks...✔  Successfully invoked generator for plugin: @vue/cli-plugin-typescript

七、vue及组件的卸载

vue的卸载

• npm uninstall vue-cli -g（3.0以下版本卸载）
• npm uninstall -g @vue/cli（3.0以上版本卸载）

vue-cli的卸载

• npm uninstall vue-cli -g（3.0以下版本卸载）
• npm uninstall -g @vue/cli（3.0以上版本卸载）

卸载本地的webpack-cli:

• npm uninstall -g webpack-cli
• npm uninstall webpack-cli

卸载webpack:

• npm uninstall -g webpack
• npm un webpack

八、vue项目结构

(转载：Vue开发实践之目录结构 - 掘金）

Vue开发实践之目录结构

约定的目录结构如下：

├── public/                             # 静态资源目录
├── src/
│   ├── assets/                         # 全局资源目录
│   │   ├── fonts/
│   │   └── images/
│   │
│   ├── components/                     # 全局组件
│   │   └── UserSelectTable/
│   │       ├── style/
│   │       │   ├── _var.scss
│   │       │   └── index.scss
│   │       ├── UserSelectTable.vue
│   │       └── index.js
│   │
│   ├── layouts/                         # 自定义布局目录，可以写一个 ProLayout 代替自定义布局
│   │   ├── Basic.vue
│   │   └── User.vue
│   │
│   ├── mocks/                           # 本地模拟数据
│   │   ├── data/
│   │   ├── setup.mock.js
│   │   └── users.mock.js
│   │
│   ├── store/                           # 状态管理
│   │   ├── plugins/
│   │   │   ├── persist.js
│   │   │   └── qiankun.js
│   │   ├── modules/                     # 除非业务过于复杂，否者不推荐
│   │   │   ├── cart.js
│   │   │   └── products.js
│   │   ├── getters.js                   # 根级别的 getters
│   │   ├── actions.js                   # 根级别的 action
│   │   ├── mutations.js                 # 根级别的 mutation
│   │   └── index.js
│   │
│   ├── router/
│   │   ├── routes.js                   # 路由配置
│   │   └── index.js
│   │
│   ├── services/                       # 全局数据请求
│   │
│   ├── views/                          # 页面级组件
│   │   ├── Home/
│   │   │   ├── components/             # 页面级组件
│   │   │   ├── services/               # 页面级组数据请求
│   │   │   │   └── repo.js
│   │   │   └── Home.vue
│   │   │
│   │   └── About/
│   │       ├── components/
│   │       └──  About.vue
│   │
│   ├── login.js                        # 登录页入口
│   └── main.js                         # 应用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── LICENSE.md
├── jsconfig.json
└── package.json

说明
public
静态资源目录，这里的内容不会被编译，直接复制到编译输出目录。

assets
全局资源目录，这里存放源码中使用到的静态资源，会和源码一起被编译。

components
项目通用的组件目录，推荐的目录形式如下：

components/
    └── UserSelectTable/
        ├── style/                 # 组件样式
        │   ├── _var.scss
        │   └── index.scss
        ├── UserSelectTable.vue
        └── index.js              # 组件出口

一个组件一个目录，方便后期迁移至出项目，独立成一套业务 UI 组件库。

layouts
布局组件目录

layouts/
    ├── Basic.vue     # 经典布局
    └── User.vue      # 用户布局，只有顶部菜单，没有侧边栏菜单

mocks
本地模拟数据的目录，

推荐的目录形式如下：

mocks/
    ├── setup.mock.js    # Mock 配置
    ├── search.mock.js   # Mock API
    └── data/            # 模拟数据目录，存储 json 等形式的文件

store
vuex 目录，推荐的目录形式如下:

store/
    ├── index.js
    ├── actions.js        # 根级别的 action
    ├── getters.js        # 根级别的 getters
    ├── mutations.js      # 根级别的 mutation
    ├── plugins/          # 插件目录
    │    ├── persist.js
    │    └── qiankun.js
    └── modules/           # 除非业务过于复杂，否者不推荐
        ├── cart.js
        └── products.js

如果业务过于负责，可以考虑 MPA 或 微前端 技术。

services
services 会作为项目的数据请求目录，api 将从项目中移除，同时如果后端提供了 swagger 文档，将使用 pont 自动生成 JS 代码。

├── services/                   # 全局数据请求
│   └── repo.js
│
├── views/
│   ├── services/               # 页面级组数据请求
│   │   │   └── repo.js
│   │   └── Home.vue

router
vue-router 目录，推荐的目录形式如下:

router/
    ├── routes.js   # 路由配置，如果路由过多，建议拆成多个配置文件
    └── index.js

main.js
项目的入口文件，用于对应用进行全局配置，

.env
环境变量文件，详见 模式和环境变量

.browserslistrc
在不同前端工具之间共享目标浏览器和 Node.js 版本的配置。

browserl.ist
browserslist.dev
.editorconfig
统一编辑器的缩进等配置。

.prettierrc
代码美化工具。

.eslintrc.js
代码检查工具。

babel.config.js
语法转换工具，将最新的 JS API 降级为低版本浏览器兼容的代码。

vue.config.js
CLI 配置文件。

jsconfig.json
VSCode 支持的配置文件，和 tsconfig.json 互斥，详见 jsconfig.json。

tsconfig.json
VSCode 支持的配置文件，和 jsconfig.json 互斥，详见 tsconfig.json 是什么。

package.json
Node 项目的清单文件，用于提供给如 npm 或 yarn 工具使用，详见 package.json 指南

九、vue学习资源

vue.js中文官网：http://cn.vuejs.org/

vue.js源码：https://github.com/vuejs/vue

vue.js官方工具：https://github.com/vuejs

vue.js官方论坛：forum.vuejs.org

十、Vue 安装过程中遇到的问题记录

（1）、vue安装后使用npm list vue 显示empty的一种解决方法
npm list vue显示`-- (empty)解决办法，后面加个 “ -g ” （全局） 

• npm list vue -g

（2）、查看npm安装包的版本号，一般情况都是执行： 包名 --version 或 包名 -V。
当执行vue --version时，如果安装了@vue/cli 那么得到的是@vue/cli的版本，而不是vue的。
所以正确查看方式是执行：

查看npm安装vue包的版本号

• npm list vue
• 或是在package.json文件里直接看到

（3）、安装运行时提示权限错误

安装运行时提示权限错误

• 1、cmd 控制台使用管理员身份打开
• 2、确保 node.js 安装目录获得了所有权限

  node.js 安装目录右键属性，选择“安全”选项卡，点击“编辑”按钮，选择“完全控制”

十一、常见的npm命令

（转载于网络）

npm 常用命令简写说明

-g： 为 --global 的缩写，表示安装到全局目录里

-S： 为 --save 的缩写，表示安装的包将写入package.json里面的dependencies

-D： 为 --save-dev 的缩写，表示将安装的包将写入packege.json里面的devDependencies

 i： 为install的缩写，表示安装

1. npm 安装配置

在nodejs安装的根目录下新建 node_cache 和 node_global 两个文件夹，分别使用以下命令设置全局的安装包目录：

    npm config set prefix "D:\Program Files\nodejs\node_global"

    npm config set cache "D:\Program Files\nodejs\node_cache"

2. 查看 npm 版本

npm -v

3. npm修改包下载源

# 修改包下载源，设置全局的npm淘宝镜像

npm config set registry https://registry.npm.taobao.org

# 换回默认全局镜像

npm config set registry https://registry.npmjs.org

4. npm 安装模块

npm init  # npm 初始化当前目录，初始化后会出现一个package.json配置文件。可以在后面加上-y ，快速跳过问答式界面。

npm i  # 安装所有依赖

npm i express  # 安装模块到默认dependencies

npm i express  #-g 、-S 、-D

npm i 模块名@指定的版本

npm install：会根据项目中的package.json文件自动下载项目所需的全部依赖。

npm install 包名 --save-dev(npm install 包名

5. npm 卸载模块

npm uninstall express  # 卸载模块，但不卸载模块留在package.json中的对应信息

npm uninstall express -g  # 卸载全局模块

npm uninstall express --save  # 卸载模块，同时卸载留在package.json中dependencies下的信息

npm uninstall express --save-dev  # 卸载模块，同时卸载留在package.json中devDependencies下的信息

npm uninstall 包名：卸载指定包。

6. npm 更新模块

npm update 模块名  # 更新最新版本的模块

npm update 模块名@指定版本  # 更新到指定版本号的模块

npm install 模块名@latest  # 可以直接更新到最后一个新版本

npm update 包名：更新指定包。

7. npm 查看命令

npm root  # 查看项目中模块所在的目录，查看当前包的安装路径。

npm root -g  # 查看全局安装的模块所在目录，全局的包的安装路径。

npm list 或者 npm ls  # 查看本地已安装模块的清单列表

npm list -g：查看全局已经安装过的node包。

npm view 模块名 dependencies  # 查看某个包对于各种包的依赖关系

npm view 模块名 version  # 查看模块最新的版本号

npm view 模块名 versions  # 查看所有模块历史版本号

npm view 模块名  # 查看最新的模块版本信息

npm info 模块名  # 查看模块的详细信息

npm list 模块名 或 npm ls jquery  # 查看本地已安装的模块的详细信息

npm view 模块名 repository.url  # 查看模块名包的来源地址

npm ls 包名：查看本地安装的指定包及版本信息，没有显示empty。

npm ls 包名 -g：查看全局安装的指定包及版本信息，没有显示empty。

8. npm 其他命令

npm cache clean  # 清除npm的缓存

npm prune  # 清除项目中没有被使用的包

npm outdated  # 检查模块是否已经过时

npm repo 模块名  # 会打开默认浏览器跳转到github中模块名的页面

npm docs 模块名  # 会打开默认浏览器跳转到github中模块名的README.MD文件信息

npm home 模块名  # 会打开默认浏览器跳转到github中模块名的主页

npm --help：查看npm帮助命令。

npm 指定命令 --help：查看指定命令的帮助。

npm config list：查看配置信息。

npm info 指定包名：查看远程npm上指定包的所有版本信息。
 

    推荐阅读：

30	​	Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29	​​​	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
28	​​​	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决
27	​​​	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
26	​​​	2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特
25	​​​	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）
24	​​​	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23	​​​	​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
22	​​​	【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
21	​​​	python爱心源代码集锦（18款）
20	​​​	巴斯光年python turtle绘图__附源代码
19	​​​	Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
18	​​​	​草莓熊python turtle绘图代码（玫瑰花版）附源代码
17	​​​	立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16	​​​	皮卡丘python turtle海龟绘图（电力球版）附源代码
15	​​​	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
14	​​​	草莓熊python turtle绘图（风车版）附源代码
13	​​​	用代码过中秋，python海龟月饼你要不要尝一口？
12	​​​	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
11	​​​	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
10	​​​	Python函数方法实例详解全集(更新中...)
9	​​​	matplotlib 自带绘图样式效果展示速查（28种，全）
8	​​​	手机屏幕坏了____怎么把里面的资料导出（18种方法）
7	​​​	2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状
6	​​​	Python中Print()函数的用法___实例详解(全，例多）
5	​​​	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)
4	​​​	Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
3	​​​	Tomcat 启动闪退问题解决集（八大类详细）
2	​​​	Tomcat端口配置（详细）
1	​​​	tomcat11、tomcat10 安装配置（Windows环境）（详细图文）