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