目录大纲
一、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项目的预设配置
| 选项 | 说明 |
|---|---|
| Default ([Vue 3] babel, eslint) | 基于Vue3配置的默认版本，自动包含了babel与eslint的配置 |
| Default ([Vue 2] babel, eslint) | 基于Vue2配置的默认版本，自动包含了babel与eslint的配置 |
| Manually select features | 手动配置 |
一般选择手动配置，或者自己通过手动配置创建的新的预设配置。
3.Check the features needed for your project：添加项目中需要的功能
| 选项 | 说明 |
|---|---|
| Babel |
（建议添加）转码器，将ES6的代码转成ES5的，来保证对浏览器的兼容性 |
| TypeScript | 一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行。 |
| Progressive Web App (PWA) Support | 渐进式Web应用程序 |
| Router |
（建议添加）vue-router，官方的路由管理包，添加之后也会自动生成路由配置相关代码。一般默认创建的项目都是单页面项目，添加路由管理后可以开发多页面项目
|
| Vuex |
（建议添加）vuex，官方的全局状态管理包，添加之后也会自动生成全局状态配置相关代码 |
| CSS Pre-processors |
（建议添加）使用css预处理器，因为一般我们会使用scss或者less |
| Linter / Formatter |
（建议添加）代码风格检查和格式化工具 |
| Unit Testing | 单元测试工具 |
| E2E Testing | e2e（end to end） 测试工具 |
鼠标上下移动切换选项，空格按钮选择或者取消选择，回车确认选中内容
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 | 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。有两套规则，一套依旧是用缩进作为分隔符来区分代码块的；另一套规则(受LESS影响)和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS（SCSS默认使用 .scss扩展名），在Sass3之后的版本都支持这种语法规则。 |
| Less | 2009年出现，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过Sass，其缺点是比起Sass来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了Sass演变到了SCSS的时代，著名的Twitter Bootstrap就是采用Less做底层语言的。Less是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更加方便，Alexis开发了Less并提供了类似CSS的书写功能。 |
| Stylus | 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。 |
一般选择Sass/SCSS
7.Pick a linter / formatter config：选择ESLint代码校验规则
| 选项 | 说明 |
|---|---|
| ESLint with error prevention only | 只配置使用 ESLint 官网的推荐规则 |
| ESLint + Airbnb config | 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 |
| ESLint + Standard config | 使用 ESLint 官网推荐的规则 + Standard 第三方的配置 |
ESLint + Prettier(推荐使用)
|
使用 ESLint 官网推荐的规则 + Prettier 第三方的配置。Prettier 主要是做风格统一 |
8.Pick additional lint features：选择ESLint校验时机
| 选项 | 说明 |
|---|---|
| Lint on save | 保存代码的时候校验 |
| Lint and fix on commit | fix或commit的时候校验 |
可以两个都选
9.Where do you prefer placing config for Babel, ESLint, etc.?：选择将Babel、ESLint等选项独立放置，还是在package.json文件中？
| 选项 | 说明 |
|---|---|
In dedicated config files(推荐选项)
|
独立放置在config文件中 |
| In package.json | 放置在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 浏览器前缀。
| 内容 | 说明 |
|---|---|
| > 1% | 表示使用全球超过1%人使用的浏览器 |
| last 2 versions | 表示所有浏览器兼容到最后两个版本 |
| not dead | 不支持被标记为已经死亡的浏览器。死亡的标准：最新的两个版本中发现其市场份额已经低于 0.5% ， 并且在24个月内没有官方支持或更新的浏览器。目前IE 11，IE_Mob 11，黑莓10，黑莓7，三星4，OperaMobile 12.1和百度的所有版本都是被标记为死亡的 |
| not ie 11 | 表示部支持IE 11的浏览器 |
| chrome >= 14 | 表示支持chrome 14及以上的浏览器版本 |
| safari >= 3 | 表示支持Safari 3及以上的浏览器版本 |
| ios >= 8 | 表示支持iOS 8以上的系统 |
| android >= 4.0 | 表示支持Android 4以上的系统 |
.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中。
网友评论