脚手架

脚手架 Vue CLI：用于快速生成 Vue 项目
安装 Vue CLI：npm i -g @vue/cli
查看 Vue CLI 版本：vue -V
创建项目：① vue create project-name、 ② cd XXX 进入项目所在目录、 ③ npm run serve 运行项目

项目创建过程

vue create vue-demo 创建 Vue 项目 vue-demo
Please pick a preset: (Use arrow keys) —— 选择预设
1. Default ([Vue 3] babel, eslint) —— Vue3 的默认配置
  1. babel：可将代码中过高版本的 JS 语法转成浏览器能识别的语法（浏览器不能识别过高版本的 JS 语法）
  2. eslint：用于检查 JS 代码是否符合编写规范
2. Default ([Vue 2] babel, eslint) —— Vue2 的默认配置
3. Manually select features —— 自定义配置 ✔️
Please pick a preset: Manually select features —— 选择需要的功能
Check the features needed for your project: (Press space to select, a to toggle all, i to invert selection, and enter to proceed)
1. Babel —— 可将代码中过高版本的 JS 语法转成浏览器能识别的语法 ✔️
2. TypeScript —— 是否支持 TS 语法
3. Progressive Web App (PWA) Support —— 网页应用程序（应用的话，离线状态下也能访问网页，但兼容性较差）
4. Router —— 用于配置路由 ✔️
5. Vuex —— 用于管理数据 ✔️
6. CSS Pre-processors —— CSS 预处理器 ( less、sass、styuls ) ✔️
7. Linter / Formatter —— 检查 JS 语法 ✔️
8. Unit Testing —— 单元测试模块
9. E2E Testing —— 端到端测试模块
Choose a version of Vue.js that you want to start the project with (Use arrow keys) —— 选择 Vue.js 版本
- 2.x ✔️
- 3.x
Use history mode for router? (Requires proper server setup for index fallback in production) —— 路由是否使用 history 模式 n
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): —— 选择 CSS 预处理器
1. Sass/SCSS (with dart-sass)
2. Less ✔️
3. Stylus
Pick a linter / formatter config: (Use arrow keys) —— 选择工具，用于检查代码编写规范
1. ESLint with error prevention only
2. ESLint + Airbnb config
3. ESLint + Standard config
4. ESLint + Prettier ✔️
Pick additional lint features: —— 在什么时候检查代码编写规范
1. Lint on save —— 在保存代码的时候 ✔️
2. Lint and fix on commit —— 在 commit 代码的时候
Where do you prefer placing config for Babel, ESLint, etc.? —— 将 Babel、ESLint… 的配置编写在哪里
1. In dedicated config files —— 创建各自的配置文件编写配置 ✔️
2. In package.json —— 将配置都编写在 package.json 中
Save this as a preset for future projects? (y/N) —— 是否存为预设 N

项目结构分析

node_modules：用于存放依赖的目录
public：用于存放静态资源的目录；使用 webpack 打包时，会将该文件夹中的静态资源原封不动地打包到 dist 目录下
1. favicon.ion：网页的图标
2. index.html：渲染的模板，可使用 webpack 进行配置
src：用于存放源码的目录
1. assets：用于存放静态资源的目录（一般放置多个组件共用的静态资源）
  webpack 打包时，会把该目录下的静态资源当作一个模块，编译、打包到 JS 文件中
2. components：用于存放组件的目录
3. router：用于存放路由配置文件的目录
4. store：用于存放 Vuex 配置文件的目录
5. views：用于存放页面组件的目录
6. App.vue：根组件，是所有组件的父组件
7. main.js：项目构建的入口文件，是整个程序中最先执行的文件 ❤
.eslintrc.js：EsLint 配置文件
.gitignore：用于配置不需要被 Git 管理的文件(夹)
babel.config.js：Babel 的配置文件
jsconfig.json：webpack 的配置文件
package.json：依赖包的配置文件
pack-lock.json：依赖包的版本控制文件。指定项目依赖包的版本号，可保证其他人在执行 npm i 时下载的依赖包与原版本一致
README.md：项目描述文件
vue.config.js：脚手架的配置文件

jsconfig.json

webpack 的配置文件
与其他 JSON 文件不同的是，该 JSON 文件可以写注释

{// 编译配置"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {"@/*": ["src/*"] // 设置路径简写 `@` → `src/`},"lib": ["esnext", "dom", "dom.iterable", "scripthost"]}
}

在 CSS 中也可以使用 @，但是要在前面加 ~

background: url('~@/assets/1.jpg');

main.js

// 引入 vue, 默认引入残缺版的 Vue (dist/vue.runtime.common.js), 残缺版的 Vue 没有 [模板解析器]
// 完整版的 Vue 在 vue/dist/vue.js, 可以在 package.json 中配置引入的版本
import Vue from 'vue';// 引入 App.vue 组件
import App from './App.vue';// 关闭生产版本的提示
Vue.config.productionTip = false;// 创建 Vue 实例
new Vue({// 残缺版的 Vue 可以使用 render 渲染模版// render 为渲染函数, 接收 createElement 方法作为第 1 参数, 以创建 VNode// 若 render 函数存在, Vue 就不会根据 template / el 配置项渲染模板// // 1️⃣ render 的简写// render: h => h(App)// 2️⃣ render 的标准写法render(createElement) {// return createElement("h1", "大哥好") // 使用方法1：渲染节点return createElement(App); // 使用方法2：渲染组件},// 完整版的 Vue 才能根据 template 渲染模板, 因为根据 template 渲染需要 [模板解析器]// template: `<App></App>`,// components: { App }
}).$mount('#app');/*使用残缺版 Vue 的理由:因为 [模版解析器] 的体积非常大，使用阉割版的 Vue 可以使项目打包后体积小一些假设我需要铺地砖，现有两种方法:第一种: 买 100 块地砖  &  买 3 个工人  =>  得到: 完整的装修 & 3 个工人第二种: 买 100 块地砖  &  雇 3 个工人  =>  得到: 完整的装修render 的使用就像好比第二种, 使用完工人(模版解析器)后即可抛弃
*/

vue.config.js

脚手架的配置文件
更新配置文件后需要重启项目

vue.config.js 会导出一个 [包含了各种配置选项的] 对象：

module.exports = {};

可以使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({});

配置项 devServer.proxy

我们可以在 vue.config.js 中编写 devServer.proxy 来配置代理服务器，以解决跨域问题
- 代理服务器所处的 [位置] 与前端页面的 [位置] 一样，所以没有跨域问题
- 服务器之间使用传统的 HTTP 请求交互，不需要 Ajax，所以也没有跨域问题
- 前后端交互的过程就变成：
  ① 前端 → 代理服务器（请求）、 ② 代理服务器 → 服务器（请求）
  ③ 服务器 → 代理服务器（响应）、 ④ 代理服务器 → 前端（响应）
devServer.proxy 提供的代理功能，仅在开发调试阶段生效；
项目上线时，仍需要 API 接口服务器开启 CORS 跨域资源共享
devServer.proxy 有 2 种写法：String 写法 & Object 写法

① devServer.proxy 的 String 写法：值为 [需要代理的服务器地址]

const { defineConfig } = require('@vue/cli-service');module.exports = defineConfig({devServer: { proxy: 'http://127.0.0.1:5000' /* 需要代理的服务器地址 */ },
});

此时，前端通过 http://127.0.0.1:XXX/url路径 获取数据即可，XXX 为项目启动时占用的端口号
代理服务器就会向 http://127.0.0.1:5000 的 url路径 发起请求，以获取数据

这种写法只能代理一台服务器！

② devServer.proxy 的 Object 写法：通过 [请求前缀] 配置需要代理的多台服务器

const { defineConfig } = require('@vue/cli-service');module.exports = defineConfig({devServer: {proxy: {// 通过 [请求前缀] 设置需要代理的多台服务器'/students': { target: 'http://localhost:5000' },'/books': { target: 'http://localhost:5001' },},},
});

该写法中，[请求前缀] 既是区分服务器的标识，也是要请求的路径

也可以设置 [请求前缀] 仅为服务器的标识：

const { defineConfig } = require('@vue/cli-service');module.exports = defineConfig({devServer: {proxy: {'/api1': {target: 'http://localhost:5000',pathRewrite: { '^/api1': '' }, // 隐藏 [请求前缀]，保证请求地址能正确使用},'/api2': {target: 'http://localhost:5001',pathRewrite: { '^/api2': '' }, // 隐藏 [请求前缀]，保证请求地址能正确使用},},},
});

此时，我们发送请求时，就需要带上 [请求前缀] 以选择发送请求的服务器 http://127.0.0.1:XXX/api1/url路径

配置项 lintOnSave

在开发环境下，是否在每次保存时都使用 eslint-loader 检查代码是否符合编写规范
这个值会在 @vue/cli-plugin-eslint 被安装之后生效
属性值可以为 <boolean> | 'warning' | 'default'(默认) | 'error'
① true / 'warning'：将错误输出为警告，不会影响编译
② 'default'：将错误输出，会影响编译
③ 'error'：把警告也输出为错误，会影响编译

module.exports = { lintOnSave: false }; // 关掉检查

可以配置 devServer.overlay 字段，让浏览器同时显示警告和错误

module.exports = {devServer: { overlay: { warnings: true, errors: true } },
};

当 lintOnSave 是一个 truthy 的值时，eslint-loader 在 [开发环境] 和 [生产环境] 下都会被启用
如果想要在 [生产环境] 下禁用 eslint-loader，可以如下配置

module.exports = { lintOnSave: process.env.NODE_ENV !== 'production' };

webpack 在不同环境下的配置文件：[.env.development]-开发环境、 [.env.production]-生产环境、 [.env.staging]-测试环境
我们可以通过变量 process.env 得知当前环境，并获取对应配置文件内的数据

配置项 transpileDependencies

默认情况下，babel-loader 会忽略 node_modules 中的文件 (夹)

为避免构建后的代码中出现未转译的第三方依赖，可以设置 transpileDependencies: true，表示对 node_modules 中的文件(夹)也进行编译。不过，对所有的依赖都进行转译会降低构建速度

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ transpileDependencies: true });

如果对构建性能有所顾虑，可以只转译部分依赖：
可传入一个 数组 作为属性值，列出需要转译的 [第三方包名] / [正则表达式] 即可

配置项 productionSourceMap

项目打包构建后，代码都是经过压缩的。如果项目上线后发现了错误，将无法通过抛出的错误直接定位到出问题的源码
配置 Source Map 后，可以在 [源码] 与 [构建后的代码] 之间建立映射关系，进而可以通过抛出的错误直接定位到出问题的源码
如果项目不需要配置 Source Map，可以设置 productionSourceMap: false

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ productionSourceMap: false }); // 不需要 Source Map

关于基础模版

组件可由 template script style 标签组成，其中 script style 标签是可选的
为了使 VSCode 能支持 Vue 语法，并提供对应的高亮和提示，可以安装官方提供的插件：
Vue2 对应的插件使 Vetur；Vue3 对应的插件使 Volar

<template></template><script>
export default {}; // 创建 Vue 实例，并暴露出去 (使用默认暴露)
</script><style></style>

配置项 data 必须为函数式声明

因为组件可能被用来创建多个实例。如果 data 仍是一个对象，则所有的实例将共享同一个数据对象！

<template></template><script>
export default {name: 'componentName',data() {return { msg: 'superman' };},
};
</script><style lang="less" scoped></style>

style 标签的 scoped 属性

默认情况下，写在 .vue 组件中的样式会全局生效。后面引入的样式会覆盖前面引用的样式

∵ 在单页面应用程序中，所有组件的 DOM 结构，都是在唯一的 index.html 中渲染的

∴ 每个组件中的样式，都会影响整个 index.html 中的 DOM 元素
可以给 style 标签设置 scoped 属性，来解决组件样式冲突的问题
给 style 标签设置 scoped 属性后，Vue 就会为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域。此时，只有当前组件会应用编写好的样式，当前组件的父子组件都不会应用。
注意：假设在 App.vue 给 style 标签设置了 scoped 属性，其子组件 Son.vue 的根节点会同时受 App.vue 和 Son.vue 的样式影响！！！
如果希望 scoped 样式中的一个选择器可以作用于其子组件，可以使用深度选择器：

<style scoped>
.a /deep/ .b {/* Vue2 深度选择器 */
}
.a :deep(.b) {/* Vue3 深度选择器 */
}
.a ::v-deep(.b) {/* Vue3 深度选择器 */
}
</style>

通过 v-html 创建的 DOM 不受 scoped 样式影响，但仍能通过深度作用选择器设置其样式
一般情况下，我们不会给 App.vue 设置 scoped。因为 App.vue 是根组件，在这里设置的样式，一般都是需要全局应用的

style 标签的 lang="less" 属性

lang="less" 表示使用 Less 编写样式，需要下载插件 less

<style lang="less">
/* 不设置 lang 则默认为 CSS */
</style>

Vue CLI 是使用 webpack 构建项目，还需要下载 less-loader 将 less 转换为 css

注意：less-loader 依赖于 webpack，需要下载对应的版本
webpack@4 ↔ less-loader@7；webpack@5 ↔ less-loader@8/9

我们可以查看 XXX 的所有版本：npm view XXX versions

【Vue】脚手架的一些个介绍相关推荐

vue脚手架常用的规范介绍
以上是Vue脚手架的基本的目录结构,我们一般编写代码都放在src目录下,这里有一个components文件夹,该目录用于存在自定义组件.src目录小还有一个App.vue,该文件是项目展示的窗口文件. ...
Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例
Vue-CLI 基本使用命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算 ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
VUE脚手架介绍及安装教程
目录一.vue 是单文件组件 1.1之前注册组件有什么缺点 ? 1.2什么是单文件组件 :后缀为 .vue 的文件二.脚手架简介 2.1 webpack 三.脚手架介绍 3.1.vue-cli简介 ...
Vue 脚手架CLI 初始化项目
1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及 ...
ASP.NET Core微服务(五)——【vue脚手架解析接口】
ASP.NET Core微服务(五)--[vue脚手架解析接口]: 后台接口请参照:ASP.NET Core微服务(三)--[跨域配置]:[https://blog.csdn.net/feng8403 ...
npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
PC项目——vue 脚手架中实现阿里云人机滑动验证
转自๑柯帆๑ 找半天才找到这个可用的 vue 脚手架中实现阿里云人机滑动验证一.报错问题解决描述:照官网写的引入方式引入vue报错 AWSC is not define 解决:.html文件引入s ...

【Vue】脚手架的一些个介绍

脚手架

项目创建过程

项目结构分析

jsconfig.json

main.js

vue.config.js

配置项 `devServer.proxy`

配置项 `lintOnSave`

配置项 `transpileDependencies`

配置项 `productionSourceMap`

关于基础模版

配置项 `data` 必须为函数式声明

`style` 标签的 `scoped` 属性

`style` 标签的 `lang="less"` 属性

【Vue】脚手架的一些个介绍相关推荐

最新文章

热门文章

【Vue】脚手架的一些个介绍

脚手架

项目创建过程

项目结构分析

jsconfig.json

main.js

vue.config.js

配置项 devServer.proxy

配置项 lintOnSave

配置项 transpileDependencies

配置项 productionSourceMap

关于基础模版

配置项 data 必须为函数式声明

style 标签的 scoped 属性

style 标签的 lang="less" 属性

【Vue】脚手架的一些个介绍相关推荐

最新文章

热门文章

配置项 `devServer.proxy`

配置项 `lintOnSave`

配置项 `transpileDependencies`

配置项 `productionSourceMap`

配置项 `data` 必须为函数式声明

`style` 标签的 `scoped` 属性

`style` 标签的 `lang="less"` 属性