Vue-Cli脚手架利用

藏宝库编辑 · 2024-9-8 08:37:22

目次大纲
一、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中。

Vue-Cli脚手架利用

所属分类: 问答交流

新帖推荐: 30日

推荐作品