完整原文地址见
更多完整Vue笔记目录敬请见《前端 Web 笔记 汇总目录（Updating）》
本文内容提要
VueCli部分
首先需要安装nodejs- 安装完node会自动配套npm
- 使用
npm install nrm -g用于调整 镜像源，方便后续下载依赖- 这边使用淘宝镜像
npm uninstall vue-cli -g检查并清除 多余的旧版本- 使用
npm install -g @vue/cli[@版本号]安装 脚手架- 使用 脚手架 Vue Cli，从 创建项目 到 运行项目 的过程
- 退出之后，把刚刚创建的项目拉进VSCode，使用VSCode启动项目
- 初始项目结构解读
- 源代码在
src下，main.js是入口App.vue文件 简读- 关于
HelloWorld.vue文件- 单文件组件 的含义
- 基于工程实现TODOList案例 --- 单组件版[App.vue]
- 基于工程实现TODOList案例 --- 父子组件版[App.vue、ListItem.vue]
- Vue-Router部分
- 在代码中使用Router
- Router的作用 及 简述
- 首先看一下App.vue根组件怎么写
- 解析一下这个多出来的
router/index.js文件- view目录下的文件
- 例程，拓展一个Router页面
- 补充：Router路由懒加载语法糖 简述 与例程实战
- VueX部分
- 首先需要创建项目
- --- 特性配置：
- package.json文件
- VueX简述
- VueX 框架的引入、数据的定义 以及 在组件中的使用
- 在Home.vue中 使用这个 VueX提供的 全局数据字段：
- 如何在任一组件中 修改 VueX的 数据
- VueX的异步操作 同步操作
- 带参数地 修改VueX数据
- VueX修改数据 流程设计的理解
- 安装、使用axios发送ajax请求
- 把上例的axios请求 封装到 actions中
VueCli部分
首先需要安装nodejs
参考博客：
--- Install Node.js
--- Node.js 安装配置
安装完node会自动配套npm
使用npm install nrm -g用于调整 镜像源，方便后续下载依赖
安装完了注意，
如C:\Users\凌川江雪\AppData\Roaming\npm\nrm -> C:\Users\凌川江雪\AppData\Roaming\npm\node_modules\nrm\cli.js乃是依赖的安装代码路径；
nrm ls可以切换镜像源：
安装后使用时，你可能遇到这个问题：
D:\OK\nodejsOther>nrm ls internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value); ^ [TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type >string. Received undefined at validateString (internal/validators.js:124:11) at Object.join (path.js:375:7) at Object.(C:\Users\凌川江雪>\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 ] { code: 'ERR_INVALID_ARG_TYPE' } 解决方案参考——nrm报错 [ERR_INVALID_ARG_TYPE] 解决方法
这边使用淘宝镜像
npm uninstall vue-cli -g 检查并清除 多余的旧版本
使用npm install -g @vue/cli[@版本号]安装 脚手架
脚手架沉淀了许多最佳实践，
可以借助它快速生成Vue工程，包括 项目目录组织、webpack打包配置等；
使用 脚手架 Vue Cli，从 创建项目 到 运行项目 的过程
命令：vue create [项目名]
如vue create demo-pro；
运行创建命令之后，工具会询问创建方式：
接着，进入选择特性界面：
这里选择以上三个特性即可，然后回车：
回车确定；
这里先选择第一个，回车确定；
config文件，放一个单独的文件里，还是放一个package.json里，这里先选第一个；
回车后工程开始创建：
工程创建完成：
使用
npm run serve启动工程：
ctrl + c两次可以终止运行：
退出之后，把刚刚创建的项目拉进VSCode，使用VSCode启动项目
因为我们无需每次都用cmd去启动项目；
【刚拉进来可能启动不了，报9009之类的错，
这时候重启一下VSCode就是了；
如果项目中没有
node_modules，则需先运行
npm install安装node_modules依赖！！】
初始项目结构解读
注意要在VS code中安装
vetur这个插件，
使得VS可以提供 语法高亮、提示 等效果：
源代码在src下，main.js是入口
--- import { createApp } from 'vue'
指明createApp的来源；
--- import App from './App.vue'
指明App实例，来自于当前文件夹下的 App.vue文件；
--- createApp(App).mount('#app')则
创建实例、挂载实例：
App.vue文件 简读
--- 标签对的内容， 看了一下结构，其实也没什么特殊的了，
For a guide and recipes on how to configure / customize this project, 顾名思义，即一个组件就代表了一个组件， 运行效果： 首先需要创建一个子组件单文件： App.vue： 运行效果同上例； 创建好工程项目后，同样把它拉到VScode里面， 作用：根据url的不同，展示不同的内容； 如下，运行项目，默认url --- --- createRouter是vue-router的一个函数，用于创建和初始化Router； --- 注意 定义routes参数这里， -- 可以看到Home.vue这里其实引用一个HelloWorld子组件： 完事，运行，点击Heheda，效果： 如上例程中， 所以， 试验，运行上个例程，之后打开浏览器测试工具： VueX 其实就是一个 main.js中use它： 运行效果： 流程总结： --- 首先，需要在事件触发的函数里， --- 接着在 运行： 即省略 VueX建议在 例程，首先需要组件发起dispatch： 运行，点击文本，两秒后文本（即背后的数据）自动改变： --- About.vue --- store/index.js： --- actions中的 事件回调函数，自动生成两个形参， 运行，点击文本， 这样设计， --- Home.vue： 运行效果同上例； --- About.vue --- store/index.js: 运行，到About页， --- About.vue --- store/index.js 找到一个fastmock接口， 运行效果： --- About.vue --- store/index.js 运行：
其实就等价于之前在组件实例中写的template:键模板；
---
关于
HelloWorld.vue文件
跟上面App.vue的结构大体都是一样的：
{{ msg }}
check out the
vue-cli documentation.
Installed CLI Plugins
Essential Links
Ecosystem
单文件组件 的含义
如上的App.vue、HelloWorld.vue都是单文件组件；
单独一个文件内容，就是完整的 HTML（） + CSS（
基于工程实现TODOList案例 --- 父子组件版[App.vue、ListItem.vue]
其代码：
与上例 主要区别就是在
Vue-Router部分
创建带router的项目
选择特性的时候要选上Router：
适配会简单些：
在代码中使用Router
可以看到这里的目录，
可以看到main.js中，多了一个.use(router)Router的作用 及 简述
http://localhost:8080/#/，展示主页（Home页）：http://localhost:8080/#/about访问，则展示about页：
首先看一下App.vue根组件怎么写
router-link是定义 跳转路由的标签，
to属性可以配置url尾部参数【前部 自动补上 网站根地址】，
标签内容配置显示的内容；
点击标签内容，即跳转到，to补全url 指向的页面！！
如果有写
---
根据router-link以及网页url组成的url路由，
在router/index.js 文件中的 路由对象（如下一节的routes）里，
找到对应的组件路由属性，拿到对应的组件文件路径，
在view目录中找到 对应的组件 去显示！解析一下这个多出来的
router/index.js 文件import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
同时这里第二个参数 使用了路由参数routes；
path定义 路径、name定义 名称、component进行 组件的引入；
routers里的组件既称之为component，
也称之为view，子组件的单文件都放在view文件夹下；view目录下的文件
例程，拓展一个Router页面
补充：Router路由懒加载语法糖 简述 与例程实战
router/index.js 中的这个写法，
component 这里使用了 import的方式 引入了组件，
这是一种懒加载、异步加载（如模板注释：lazy-loaded）的方式，
即当网页跳到这一页的时候，才会加载对应的资源文件，否则不加载；
而如 Home页的加载方式，
则是普通的常规加载：
--- 异步加载的方式：
首页打开会快点，节省不必要的资源占用，
但是在切换到懒加载页面时，则需要花费一定的额外加载时间；
--- 同步加载的默认方式：
则可能 一开始打开首页等页面 会慢一些，
但是会把其他页面一开始就加载好，切换的时候会快一点；
--- 具体选择哪种方式，就根据业务需要进行选择；...
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/heheda',
name: 'Heheda',
component: () => import(/* webpackChunkName: "about" */ '../views/Heheda.vue')
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
...
可以看到这个时候页面才加载about的资源：
VueX部分
首先需要创建项目
--- 特性配置：
package.json文件
VueX简述
数据管理框架，
它创建了一个全局的、唯一的数据仓库；
当一个前端项目特别大的时候，
或者类似 几十个页面 同步共享 某部分数据 的场景，
我们不可能还是用props、provide、inject等语法去传递数据，
这个时候我们需要一个更加完善的数据管理方案；VueX 框架的引入、数据的定义 以及 在组件中的使用
这里在state中准备了一个测试数据：
在Home.vue中 使用这个 VueX提供的 全局数据字段：
这里借助computed属性，
通过this.$store.state.myTestString获取到 数据字段：
{{myTestString}}
运行效果：
This is an about page
{{myTestString}}
如何在任一组件中 修改 VueX的 数据
要修改数据的组件，
发起dispatch(事件) --->
store/index.js中actions里
对dispatch的事件 进行 监听 和回调处理，
然后发起一个commit(事件) --->
store/index.js中mutations里
对commit的事件 进行 监听 和回调处理，
处理逻辑中，完成对数据的修改；
派发一个action，
改变数据 这里在About.vue中，
我们派testChange【这玩意是可以自定义的】的action，
this.$store.dispatch("testChange");
This is an about page
{{ myTestString }}
store/index.js中actions里，即这个VueX全局数据仓库中，
做dispatch的 监听回调处理，
store/index.js中的actions会响应任意组件的dispatch；
--- 再接着，
在actions里 对应的回调方法中，使用commit('自定义事件名')，
触发一个mutations，
store/index.js中的mutations，
会响应actions的commit；
--- 最后，
在store/index.js中的mutations里，
做actions的commit的监听回调，
在对应commit的 事件回调函数中（如testChange()），
修改数据（如this.state.myTestString = "lueluelue";）即可；import { createStore } from 'vuex'
export default createStore({
state: {
myTestString: "heheda",
},
mutations: {
testChange() {
console.log("mutations --- testChange");
this.state.myTestString = "lueluelue";
}
},
actions: {
testChange() {
console.log("actions --- testChange");
this.commit('testChange');
}
},
modules: {
}
})
可见完成了数据的修改，效果：
可见这边的数据也跟着改变了，
体现了VueX的全局特性：
以上是比较完整的步骤，而如果修改数据的时候不涉及异步操作，则可以简化上述流程
组件的dispatch和store的actions的步骤，
组件直接就commit，
然后回调到store的mutations，
直接修改数据：VueX的异步操作 同步操作
mutations中只进行立即执行的同步操作，
如果要进行异步操作，必须要在actions中进行，
也就是要采用上上节的步骤 进行VueX数据的修改；
接着在actions中进行异步操作：
import { createStore } from 'vuex'
export default createStore({
state: {
myTestString: "heheda",
},
mutations: {
testChange() {
console.log("mutations --- testChange");
this.state.myTestString = "lueluelue";
}
},
actions: {
testChange() {
setTimeout(() => {
console.log("actions --- testChange");
this.commit('testChange');
}, 2000);
}
},
modules: {
}
})
带参数地 修改VueX数据
dispatch时，
传递的 第一个参数为action，
第二个参数为意图改动的目标数据参数：
This is an about page
{{ myTestString }}
第一个为store实例，
第二个为 组件中dispatch 传递过来的 数据参数；
--- mutations的 事件回调函数，也自动生成两个形参，
第一个为 state实例，
它的值是 以Proxy的结构存储着
回调当前事件处理函数的时刻 store 数据仓库的 状态【即 state属性】，
第二个为 actions中commit 【同步操作时，也可以是组件中的commit】
传递过来的 数据参数；import { createStore } from 'vuex'
export default createStore({
state: {
myTestString: "heheda",
},
mutations: {
testChange(state, str) {
console.log("mutations --- testChange");
console.log("mutations --- testChange --- state", state);
state.myTestString = str;
}
},
actions: {
testChange(store, str) {
setTimeout(() => {
console.log("actions --- testChange");
console.log("actions --- testChange --- store", store);
// this.commit('testChange');
store.commit('testChange', str);
}, 2000);
}
},
modules: {
}
})
两秒后字体改变，效果：VueX修改数据 流程设计的理解
--- 可以把同步操作的逻辑封装在mutations中处理，
把异步操作的逻辑封装在actions中处理；
--- 又可以通过对触发事件名的自定义，
对特定的业务处理逻辑、修改数据代码块 做标记；
--- 如此使得项目可维护性高、可拓展性高、可读性高，
出问题时容易排查，拓展代码时也比较方便；在setup【compositionAPI】中使用VueX
运行效果：
{{ myTestString }}
使用toRefs整理上述代码
{{ myTestString }}
在About页中 试试 setup中修改数据
This is an about page
{{ myTestString }}
import { createStore } from 'vuex'
export default createStore({
state: {
myTestString: "heheda",
},
mutations: {
testChange(state, str) {
console.log("mutations --- testChange");
console.log("mutations --- testChange --- state", state);
state.myTestString = str;
}
},
modules: {
}
})
点击文本：
试一下 setup异步处理
This is an about page
{{ myTestString }}
import { createStore } from 'vuex'
export default createStore({
state: {
myTestString: "heheda",
},
mutations: {
testChange(state, str) {
console.log("mutations --- testChange");
console.log("mutations --- testChange --- state", state);
state.myTestString = str;
}
},
actions: {
testChange(store, str) {
setTimeout(() => {
console.log("actions --- testChange");
console.log("actions --- testChange --- store", store);
// this.commit('testChange');
store.commit('testChange', str);
}, 2000);
}
},
modules: {
}
})
使用axios发送ajax请求
https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register；
其内容：
在About.vue中请求数据并显示：
--- 主要注意要import；
--- get方法的参数为url，访问数据接口；
--- then接收 接口回复；
This is an about page
{{ myTestString }}
把上例的axios请求 封装到 actions中
This is an about page
{{ myTestString }}
import { createStore } from 'vuex'
import axios from "axios";
export default createStore({
state: {
myTestString: "heheda",
},
mutations: {
testChange(state, str) {
console.log("mutations --- testChange");
console.log("mutations --- testChange --- state", state);
state.myTestString = str;
}
},
actions: {
testChange(store) {
axios
.get(
"https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register"
)
.then((response) => {
console.log("response", response);
const msg = response.data.desc;
console.log("response.data.desc", msg);
store.commit('testChange', msg);
});
}
},
modules: {
}
})