目次大纲
一、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官网 ,选择长期支持版下载安装即可
安装完成后，通过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/cli3、创建vue项目
创建项目标方式有两种，一、通过终端下令创建。 二、通过可视化欣赏器界面创建。固然可视化界面的方式利用更加简单明确，但碍于风俗一样平常都是利用的终端下令创建，这里只先容用终端下令创建项目标方式，
1.创建工程
//起首cd到本身想要存放工程的路径下，然后实行下面下令创建项目//prject-name是创建的工程名字vue create prject-name2.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大概lessLinter / Formatter（发起添加）代码风格查抄和格式化工具Unit Testing单元测试工具E2E Testinge2e（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/SCSS2007年诞生，最早也是最成熟的CSS预处置惩罚器，拥有ruby社区的支持和compass这一最强盛的css框架，如今受LESS影响，已经进化到了全面兼容CSS的SCSS。有两套规则，一套依旧是用缩进作为分隔符来区分代码块的；另一套规则(受LESS影响)和CSS一样采取了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS（SCSS默认利用 .scss扩展名），在Sass3之后的版本都支持这种语法规则。Less2009年出现，受Sass的影响较大，但又利用CSS的语法，让大部分开发者和设计师更轻易上手，在ruby社区之外支持者远高出Sass，其缺点是比起Sass来，可编程功能不敷，不外优点是简单和兼容CSS，反过来也影响了Sass演变到了SCSS的时代，闻名的Twitter Bootstrap就是采取Less做底层语言的。Less是Alexis Sellier受Sass的影响创建的一个开源项目。其时SASS采取了缩进作为分隔符来区分代码块，而不是CSS中广为利用的大括号（｛｝）。为了让CSS现有的用户利用起来更加方便，Alexis开发了Less并提供了雷同CSS的书写功能。Stylus2010年产生，来自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 commitfix或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文件内容分析
//引入vueximport { 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的元素中
//导入vueimport { createApp } from "vue";//导入挂在的组件import App from "./App.vue";//导入利用的router，默认读取的index.jsimport router from "./router";//导入利用的store,默认读取的index.jsimport 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 serviceconst { 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中。
|
