vue 初始化项目
1.安装node,安装npm
# 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 创建完成后，可以通过命令打开图形化界面，如下图所示 vue ui
【Vue】脚手架的一些个介绍
脚手架
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
作用：快速生成 Vue 项目结构的基础框架
安装
安装脚手架：npm i -g @vue/cli
输入 vue -V 查看版本，以检查是否安装成功
创建项目
切换到要创建项目的目录，调出终端，输入命令：vue create project-name
cd 进项目目录、执行 npm run serve 运行项目
通过图形界面创建项目：vue ui
项目创建过程
输入 vue create demo 命令行创建 Vue 项目 demo
Please pick a preset: (Use arrow keys) —— 选择预设
Default ([Vue 2] babel, eslint) —— Vue2 的默认配置
babel：浏览器只认识 ES5 语法，babel 能将代码中 ES6 语法转成 ES5 语法
eslint：检查 JS 语法
Default (Vue 3) ([Vue 3] babel, eslint) —— Vue3 的默认配置
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)
Babel —— ES6 向下兼容 ES5 √
TypeScript —— 是否支持 TS 语法
Progressive Web App (PWA) Support —— 网页应用程序（应用的话，离线状态下也能访问网页，但兼容性较差）
Router —— 路由 √
Vuex —— 用于管理数据 √
CSS Pre-processors —— CSS 预处理器 (less、sass、styuls) √
Linter / Formatter —— 检查 JS 语法
Unit Testing —— 单元测试模块
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 预处理器
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less √
Stylus
Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier √
Pick additional lint features:
Lint on save √
Lint and fix on commit
Where do you prefer placing config for Babel, ESLint, etc.? —— 配置存储位置
In dedicated config files
In package.json √
Save this as a preset for future projects? (y/N) —— 是否存为默认预设 N
项目结构分析
node_modules：项目依赖文件夹，可通过 npm i / yarn 下载
public：存放静态资源；webpack 打包时，会将该文件夹中的静态资源 原封不动地打包到 dist 文件夹中
favicon.ion：图标
index.html：模板，可通过 webpack 配置修改
src：源码目录
assets：存放静态资源（一般放置多个组件共用的静态资源）
webpack 打包时，会把该文件夹中的静态资源 当作一个模块，编译、打包到 JS 文件里面
components：一般存放非路由组件。组件中的 name 属性应与文件名一样，方便后期维护；组件名使用大驼峰
router：存放路由文件，主文件名为 index.js
store：存放 Vuex 文件，主文件名为 index.js
views：存放页面组件
App.vue：根组件，是所有组件的父组件
main.js：入口文件，是整个程序中最先执行的文件 √
.gitignore：用于配置不需要被 Git 管理的文件(夹)
babel.config.js：babel 的配置文件，用于处理 ES 语法的兼容问题
jsconfig.json：配置 webpack 的文件
package.json：应用包配置文件
pack-lock.json：包版本控制文件。指定项目依赖包的版本号，保证其他人在执行 npm i 时下载的依赖包与原版本一致
vue.config.js：脚手架配置文件(可选)，需要和 package.json 同级 √
jsconfig.json
用于配置 webpack 的文件
与其他 JSON 文件不同的是，该 JSON 文件可以写注释
{
"compilerOptions": { // 编译配置
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": ["src/*"] // 设置路径简写 `@` → `src/`
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
在 CSS 中也可以使用 @，但是要在前面加 ~
background: url('~@/assets/1.jpg');
1
package.json
npm run serve：开启服务器；这里其实是在 script 字段中配置了 "serve": "vue-cli-service serve"
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
1
2
3
4
5
main.js
main.js 是整个项目的入口文件
render 为渲染函数，接收 createElement 方法作为第 1 参数，以创建 VNode
若 render 函数存在，则 Vue 构造函数不会从 template / el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数
// 引入 vue，默认为残缺版的 Vue：dist/vue.runtime.common.js，里面没有 [模板解析器]
// 完整版的 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 才能使用 template，因为需要 [模板解析器]
// template: `<App></App>`,
// components: { App }
// 残缺版的 Vue 可使用 render 渲染模版
// render: h => h(App) // 简写
render(createElement) { // 标准写法
// return createElement("h1", "大哥好") // 使用方法1：渲染节点
return createElement(App) // 使用方法2：渲染组件
}
}).$mount('#app')
/*
使用残缺版 Vue 的理由：
因为 [模版解析器] 的体积非常大，使用阉割版的 Vue 可以使项目打包后体积小一些
假设我需要铺地砖，现有两种方法：
第一种：买 100 块地砖 + 买 3 个工人 => 得到：完整的装修 + 3 个工人
第二种：买 100 块地砖 + 雇 3 个工人 => 得到：完整的装修
render 的使用就像好比第二种，使用完工人(模版解析器)后即可抛弃
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
vue.config.js
vue.config.js 是一个可选的脚手架配置文件，会更新 webpack.config.js 中对应的配置项
修改完成后需要重新执行 npm run serve
vue inspect > 文件名.js - 可以输出 vue 的 webpack 配置，供用户查看
该文件会导出一个 [包含了各种配置选项的] 对象：
module.exports = {}
1
可以使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({});
1
2
一些个基本配置
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true, // 是否将所有文件都编译一遍（通过 babel 编译文件：ES6+ → ES5）
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
transpileDependencies
默认情况下 babel-loader 会忽略所有 node_modules 中的文件
为避免构建后的代码中出现未转译的第三方依赖，可以设置 transpileDependencies: true
不过，对所有的依赖都进行转译会降低构建速度
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ transpileDependencies: true });
1
2
如果对构建性能有所顾虑，可以只转译部分依赖：
传入一个 数组 作为属性值，列出需要转译的 [第三方包名] / [正则表达式] 即可
lintOnSave
在开发环境下，是否在每次保存时使用 eslint-loader 检查代码格式
这个值会在 @vue/cli-plugin-eslint 被安装之后生效
Type：boolean | 'warning' | 'default'(默认) | 'error'
① true / 'warning'：将错误输出为警告，不会影响编译
② 'default'：将错误输出，会影响编译
③ 'error'：把警告也输出为错误，会影响编译
module.exports = { lintOnSave: false } // 关掉检查
1
可以配置 devServer.overlay 字段，让浏览器同时显示警告和错误
module.exports = {
devServer: { overlay: { warnings: true, errors: true } }
}
1
2
3
当 lintOnSave 是一个 truthy 的值时，eslint-loader 在 [开发环境] 和 [生产环境] 下都会被启用
如果想要在 [生产环境] 下禁用 eslint-loader，可以如下配置
module.exports = { lintOnSave: process.env.NODE_ENV !== 'production' }
1
webpack 在不同环境下的配置文件：[.env.development]-开发环境、 [.env.production]-生产环境、 [.env.staging]-测试环境
我们可以通过变量 process.env 得知当前环境，并获取对应配置文件内的数据
使用 @vue/cli-service 提供的 defineConfig 帮手函数
前端框架学习总结之Angular、React与Vue的比较详解
pdf
0星
超过10%的资源
105KB
下载
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ lintOnSave: false }); // 关闭 eslint 检验
1
2
devServer.proxy
vue-cli 提供了代理服务器，我们可以在 vue.config.js 中配置 devServer.proxy，以解决跨域问题
代理服务器所处的 [位置] 与前端页面的 [位置] 一样，所以没有跨域问题
服务器之间使用传统的 HTTP 请求交互，不需要 Ajax，所以也没有跨域问题
前后端交互过程：
① 前端 → 代理服务器（请求）、 ② 代理服务器 → 服务器（请求）
③ 服务器 → 代理服务器（响应）、 ④ 代理服务器 → 前端（响应）
devServer.proxy 的 String 写法：值为 [需要代理的服务器地址]
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
devServer: { proxy: "http://127.0.0.1:5000" /* 需要代理的服务器地址 */ }
});
1
2
3
4
5
此时，前端通过 http://127.0.0.1:8080/url路径 获取数据即可
代理服务器就会向 http://127.0.0.1:5000 的 url路径 发请求，以获取数据
如此，我们获取数据时，如果前端 ( public 文件夹 ) 有该数据资源，则直接获取前端资源
如果前端没有该数据资源，则发送请求给 [被代理的服务器] 获取数据（优先匹配前端资源）
这种写法只能代理一台服务器！
devServer.proxy 的 Object 写法：通过 [请求前缀] 配置需要代理的多台服务器
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
devServer: {
proxy: {
// 通过 [请求前缀] 设置需要代理的多台服务器
'/students': { target: 'http://localhost:5000' },
'/books': { target: 'http://localhost:5001' },
}
}
});
1
2
3
4
5
6
7
8
9
10
11
该写法中，[请求前缀] 既是区分服务器的标识，也是要请求的路径
即：前端仍通过 http://127.0.0.1:8080/url路径 获取数据
获取数据时，仍是优先获取前端资源；前端没有该资源，才发送请求给 [被代理的服务器] 获取数据
也可以设置 [请求前缀] 仅为服务器的标识：
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': '' } // 隐藏 [请求前缀]，保证请求地址能正确使用
},
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上例写法中，[请求前缀] 仅为服务器的标识，只要带上 [请求前缀] 就不会匹配前端资源
此时，我们发送请求时，就需要带上 [请求前缀] 以选择发送请求的服务器 http://127.0.0.1:8080/api1/url路径
devServer.proxy 的其他配置项
changeOrigin：用于控制请求头中的 host 值
为 true 时，服务器收到的请求头中的 host 为 localhost:3000（默认）
为 false 时，服务器收到的请求头中的 host 为 localhost:8080
ws：为 true 时，表示支持 webSocket（默认）
productionSourceMap
项目打包后，代码都是经过压缩加密的。如果运行时报错，输出的错误信息无法准确得知是哪里的代码出错
有了 map 文件就可以准确输出是哪里出错；如果项目不需要，可以不对其打包
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({ productionSourceMap: false }); // 不打包
1
2
关于基础模版
安装插件 Vetur 后，输入 <v 即会弹出基础模版提示，回车即可补全基础模版
webpack+vue+express(hot)热启动调试简单配置方法
pdf
0星
超过10%的资源
42KB
下载
<template> </template>
<script>
export default {}; // 创建 Vue 实例，并暴露出去（使用默认暴露）
</script>
<style> </style>
1
2
3
4
5
6
7
data 必须为函数式声明
当一个组件被定义，data 必须为函数式声明
因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享同一个数据对象！
<template> </template>
<script>
export default {
name: "componentName",
data() {
return { msg: "superman" };
}
}
</script>
<style lang="less" scoped> </style>
1
2
3
4
5
6
7
8
9
10
11
12
scoped 属性
默认情况下，组件之间的样式是共享的；后面引入的样式会覆盖前面引用的样式
style 标签设置了 scoped 属性，表示其 CSS 只作用于当前组件中的元素
使用 scoped 后，父组件的样式将不会渗透到子组件中
其原理是，给当前组件的元素添加了 data-v-XXX 属性；应用样式时，也使用属性选择器，实现指定样式的应用
子组件的根节点会同时受其父组件的 scoped 和子组件的 scoped 影响！！！
如果希望 scoped 样式中的一个选择器可以作用得更深，可以使用 >>>
有些预处理器无法正确解析 >>>，此时我们可以使用 /deep/ / ::v-deep 代替
<style scoped>
.a >>> .b { /* ... */ }
</style>
1
2
3
通过 v-html 创建的 DOM 不受 scoped 样式影响，但仍能通过深度作用选择器设置其样式
一般情况下，我们不会给 App.vue 设置 scoped。因为 App.vue 是根组件，在这里设置的样式，一般都是需要全局应用的
lang="less"
lang="less" 表示使用 Less 编写样式，需要下载插件 less
<style lang="less"> /* 不设置 lang 则默认为 CSS */ </style>
1
浏览器无法解析 less 语法，所以我们需要下载插件 less-loader 将 less 转换为 css
注意：less-loader 依赖于 webpack，需要下载对应的版本
webpack@4 → less-loader@7；webpack@5 → less-loader@8/9
我们可以查看 XXX 的所有版本：npm view XXX versions
打包
执行 npm run build：打包并生成 dist 文件夹
若使用 node.js 启动项目，只需将 dist 内的文件拷到 public 文件夹下即可
当 Vue-Router 的 mode 为 history 时，需要下载、配置 connect-history-api-fallback，以解决路由跳转时出现的兼容问题：
① npm i connect-history-api-fallback、 ② 配置 connect-history-api-fallback
const express = require('express');
const app = express();
app.listen(3000);
// 配置 connect-history-api-fallback，否则页面刷新后无法正常显示
const history = require('connect-history-api-fallback');
app.use(history());
app.use(express.static("./public"));
原文链接：https://blog.csdn.net/Superman_H/article/details/122834542
