目录大纲
一、Cli说明
二、安装并创建Cli项目
三、Cli项目结构说明

一、Cli说明

CLI 是一个基于 Vue.js 进行项目搭建的脚手架系统，CLI(Command-Line Interface)是一个命令行界面工具, 俗称脚手架。
CLI是基于 webpack 进行项目构建，由@vue/cli 和@vue/cli-service 组成。
CLI的目标是将Vue 项目的创建开发标准化，让开发者专注于开发项目，而不必花费太多时间去纠结配置的问题。
简单的说就是一个创建标准化vue项目的工具

@vue/cli

@vue/cli 是一个全局安装的 npm 包，提供了终端里的 vue 命令，是交互式的脚手架工具。我们一般用@vue/cli 来快速搭建一个新项目。
建项目有2种方式
1、使用 vue create 在终端中来创建。
2、使用vue ui在可视化的浏览器界面中创建

@vue/cli-service

@vue/cli-service 是一个开发环境依赖的服务工具。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。它是一个用于打包构建项目和开发运行调试的工具。
CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：
1、加载其它 CLI 插件的核心服务
2、 一个针对绝大部分应用优化过的内部的 webpack 配置；
3、项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

二、安装并使用CLI创建项目

1、安装Node.js

Node.js是一个基于Chrome V8引擎 的开源与跨平台的 JavaScript 运行时环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

npm(Node Package Manager)，是一个Node.js包管理和分发的工具，已经成为了非官方的发布Node模块（包）的标准。一般安装Node.js的时候就附带了npm

进入Node.js官网 ,选择长期支持版下载安装即可

image.png

安装完成后，通过npm -v和node -v检测安装的node与npm版本

2、安装vue cli

使用下面命令安装vue cli

npm install -g @vue/cli

安装完成后使用下面命令查看安装的vue cli版本

vue --version

如果安装的Vue cli 包版本比较老，可以通过下面的命令升级包

npm update -g @vue/cli

3、创建vue项目

创建项目的方式有两种，一、通过终端命令创建。 二、通过可视化浏览器界面创建。虽然可视化界面的方式使用更加简单明了，但碍于习惯一般都是使用的终端命令创建，这里只介绍用终端命令创建项目的方式，

1.创建工程

//首先cd到自己想要存放工程的路径下，然后执行下面命令创建项目
//prject-name是创建的工程名字
vue create prject-name

2.Please pick a preset：选择创建vue项目的预设配置

一般选择手动配置，或者自己通过手动配置创建的新的预设配置。

3.Check the features needed for your project：添加项目中需要的功能

鼠标上下移动切换选项，空格按钮选择或者取消选择，回车确认选中内容

4.Choose a version of Vue.js that you want to start the project with：选择vue的版本

根据项目需求选择，建议选择3.x

5.Use history mode for router?：选择是否用history模式来创建路由。

最直观的区别就是hash模式在url中带了一个 # ， 而history模式是没有#的。一般选择history模式

6.Pick a CSS pre-processor：选择一种css预处理器

一般选择Sass/SCSS

7.Pick a linter / formatter config：选择ESLint代码校验规则

8.Pick additional lint features：选择ESLint校验时机

可以两个都选

9.Where do you prefer placing config for Babel, ESLint, etc.?：选择将Babel、ESLint等选项独立放置，还是在package.json文件中？

10.Save this as a preset for future projects?：选择是否保存本次勾选的内容为模板

如果不想每次创建项目都重复手动勾选，可以取一个模版名字，保存为模版后续方便使用。

三、项目结构说明

按照上面步骤二中创建的项目目录结构

dist

在项目根目录下使用npm run build进行打包后，会创建dist文件夹，将工程的开发内容打包放进去，其中一般包含css、js、html、ico等。一般发布项目就是将dist文件夹内容进行发布。

相当于使用node 执行build文件夹下面的build.js文件，首先会检查dist文件夹是否已经存在，如果存在则先删除在打包，如果没有则直接打包，使用webpack的配置打包dist文件夹。

node_modules

项目中使用npm加载的各种依赖模块。

public

存放静态文件的目录。public下面的文件会原封不动的添加到dist中，不会被合并、压缩；不会被webpack打包工具所处理，多用来存放第三方插件。类似于vue2中的 static 目录。所以想要引用，必须使用绝对路径。

public/favicon.ico

项目的网页图标

public/index.html

项目的入口html文件

src

存放项目源码的文件夹

assets

存放src中组件所使用的静态资源，在webpack打包时会被当成一个模块依赖打包合并到一个文件中进行压缩。一般存放业务级的js、css等，例如一些全局的scss样式文件、全局的工具类js文件。

assets/logo.png

默认附带的vue项目图片，可以删除

components

存放全局组件的文件夹

router

存放路由配置的文件夹，默认里面会有一个index.js的路由配置文件。Vue Router的官方文档

index.js文件内容说明

//引入vue-router
//createRouter代替了以前的new Router()
//createWebHistory代替了mode: 'history'
import { createRouter, createWebHistory } from "vue-router";
//引入需要配置路由的页面挂在的组件
import HomeView from "../views/HomeView.vue";
//创建路由数组，数组中每个对象都是一个路由页面的映射关系
const routes = [
  {
    path: "/",//监听的页面路由路径
    name: "home",//页面名称，唯一性
    component: HomeView,//组件对象，只要符合path路径，那么就会执行组件
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import("../views/AboutView.vue"),
//另外一种导入组件的方式，如果像HomeView一样用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。
//vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。
  },
];
//创建Router对象
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),//使用history模式
  routes,// 配置路由和组件之间的关系
});
//将router对象传入到Vue实例
export default router;

store

存放vuex相关的文件，默认里面会有一个index.js的配置文件。用于状态管理。例如前一个页面利用store里存放数据或者状态，后一个页面利用store去数据或者修改状态。
store的执行顺序：
页面加载 → getters → 组件调用actions中的方法 → mutations（设置state的值） → getters（更新数据）

index.js文件内容说明

//引入vuex
import { createStore } from "vuex";

export default createStore({
  state: {},//用于声明定义所需要的状态
  getters: {},//计算属性
  mutations: {},//同步修改
  actions: {},//异步修改
  modules: {},//模块化
});

views

存放vue页面，用于与components组件进行区分。

App.vue

项目入口页面挂载的vue组件

main.js

项目index.html关联的入口js文件，用于将App.vue挂在到index.html中id为app的元素中

//导入vue
import { createApp } from "vue";
//导入挂在的组件
import App from "./App.vue";
//导入利用的router，默认读取的index.js
import router from "./router";
//导入利用的store,默认读取的index.js
import store from "./store";

//通过createApp挂在App组件，在组件中引入store和router。将组件挂在到页面中id位app的元素上
createApp(App).use(store).use(router).mount("#app");

.browserslistrc

指定了项目的目标浏览器的范围。文件中的值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

.eslintrc.js

eslint的规则配置文件

文件内容说明

//模块依赖导出
module.exports = {
  root: true,// 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
  //env是指environments，运行环境配置，一个环境定义了一组预定义的全局变量
  //获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
  env: {
    node: true,//设置为Node.js 全局变量和 Node.js 作用域
  },
  //继承的规则
  extends: [
    //从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件包名也是可以忽略
    "plugin:vue/vue3-essential",
    //eslint内置推荐规则
    "eslint:recommended",
    //prettier内置的推荐规则
    "plugin:prettier/recommended",
  ],
  //parserOptions的配置参数是不包括 parser 的
  //parser 是 eslint-plugin-vue 的要求，是 eslint-plugin-vue 的自定义参数
  //根据官方文档，eslint-plugin-vue 插件依赖 「vue-eslint-parser」解析器。「vue-eslint-parser」解析器，只解析 .vue 中html部分的内容，不会检测<script>中的JS内容。
  //由于解析器只有一个，用了「vue-eslint-parser」就不能用「babel-eslint」。所以「vue-eslint-parser」的做法是，在解析器选项中，再传入一个解析器选项parser。从而在内部处理「babel-eslint」，检测<script>中的js代码
  parserOptions: {
    //传入一个解析器选项parser。从而在内部处理「babel-eslint」，检测<script>中的js代码
    parser: "@babel/eslint-parser",
  },
  //自定义规则
  //"off" 或者0 关闭规则
  //"warn" 或者1 将规则打开为警告（不影响退出代码）
  //"error" 或者2 将规则打开为错误（触发时退出代码为1）
  //如：'no-restricted-syntax': 0, // 表示关闭该规则
  //【】如果某项规则，有额外的选项，可以通过数组进行传递，而数组的第一位必须是错误级别。如0,1,2
  //如 'semi': ['error', 'never'], never就是额外的配置项
  rules: {
    //如果process.env.NODE_ENV的运行环境是production，那么console就是警告，否则不开启检测console规则
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    //如果process.env.NODE_ENV的运行环境是production，那么debugger就是警告，否则不开启检测debugger规则
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

.gitignore

git版本管理的忽略配置文件

babel.config.js

babel的配置文件，用于进行一些语法转化配置，比如把ES6相关语法转化为ES5，使项目兼容性更好。

jsconfig.json

目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。该文件一般用于选择逻列出属于项目的文件，要从项目中排除的文件，以及编译器选项（见下文）。

{
  "compilerOptions": {
    //指定使用的默认es库位es5
    "target": "es5",
    //在生成模块代码时指定模块系统为esnext
    "module": "esnext",
    //指定项目的根目录路径
    "baseUrl": "./",
    //指定按照node方式进行模块的解析导入
    "moduleResolution": "node",
    //指定相对于模块路径的别名映射关系
    "paths": {
      // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
      "@/*": [
        "src/*"
      ]
    },
    //默认包含的库文件
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

lint-staged.config.js

一个过滤Git代码暂存区文件(被committed的文件)的工具配置文件。eslint之类的插件都需要指定文件才能进行检查，这样会产生一个问题，如果 src 目录存在着大量的 .js 文件，那么每次执行 eslint 时都会对所有文件检查修复，对性能是有一定影响的。为了解决这个问题，于是使用了int-staged 只检查修复修改过的文件。让其他插件只扫描暂存区的文件而不是全盘扫描。

package-lock.json

是在 npm install时候生成的文件，用以记录当前工程实际安装的各个npm package的具体来源和版本号。以保证上传git后，其他人在npm install时包是一致的。

package.json

定义了项目和模块的配置信息。npm install 命令根据这个配置文件，下载所需的模块。应用包配置文件，记录着项目名称、项目依赖、项目运行等信息.DevDependencies中会使用@vue/cli-service来帮我们去管理其他的依赖。文件中不能有中文注释，会导致编译错误。

{
  //项目名称
  "name": "test-p",
  //项目版本号
  "version": "0.1.0",
  // 项目作者
  "author": "yujia", 
  //定义项目为私有的。一般公司的非开源项目，都会设置 private 属性的值为 true。
  //因为 npm 拒绝发布私有模块，通过设置该字段可以防止项目被无意间发布出去。
  "private": true,
  ////指定了运行脚本命令的npm命令行缩写
  "scripts": {
    //设置中指定了npm run serve所要执行的命令为vue-cli-service serve,即npm run + 快捷名
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  //指定了项目运行所依赖的模块
  "dependencies": {
    //模块名字 ： 模块版本号
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  //指定了项目开发所需要的模块
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0"
  },
  //定义执行git命令时执行的动作
  "gitHooks": {
    //执行git commit的时候，git 会去执行 pre-commit 的 lint-staged插件
    //目的是让eslint只检测修改后的文件
    "pre-commit": "lint-staged"
  }
}

README.md

用作对项目进行描述说明的文件。markdown格式

vue.config.js

一个可选的配置文件，项目的根目录中如果存在这个文件，那么它会被 @vue/cli-service 自动加载。里面可以配置代理、跨域访问等

//导入cli service
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  //默认情况为true， babel-loader 会忽略所有 node_modules 中的文件，避免构建后的代码中出现未转译的第三方依赖。
  //对所有的依赖都进行转译可能会降低构建速度。
  transpileDependencies: true,
  devServer: {
    compress: true,
    port: 8081,//端口号
  },
});

webpack.config.js

vue3中将webpack.config.js放在了node_nodules/@vue/cli-serve/webpack.config.js中。