网站建设的税收编码,竹子建站邀请码,网站开发项目计划书,一元云购手机网站建设在认识vue3全家桶之前,先简单回顾一下vue2的全家桶
一.在vue2中#xff0c;全家桶技术栈
技术栈: vue2 vue-cli vuex3vue-router3webpack elementUI
1.vue-cli 脚手架构建vue项目#xff0c;CLI 服务是构建于 webpack 和 webpack-dev-server构建快速生成一个vue2的开发项…在认识vue3全家桶之前,先简单回顾一下vue2的全家桶
一.在vue2中全家桶技术栈
技术栈: vue2 vue-cli vuex3vue-router3webpack elementUI
1.vue-cli 脚手架构建vue项目CLI 服务是构建于 webpack 和 webpack-dev-server构建快速生成一个vue2的开发项目。
// 安装 vue/cl
npm install -g vue/cli
// 快速构建 my-project 项目
vue create my-projectnode环境要求 Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)2.vue-router 页面路由主要版本是4之前的版本
vue2项目直接安装: npm i vue-router默认安装最新版本,不兼容vue2,推荐指定特定版本安装
npm i vue-router3.5.23.vuex: 状态管理,vue2兼容版本目前是vuex3
npm i vuex34.UI组件库
pc组件库
element-ui
iView
Ant Design
Boostrap
...移动端组件库 Vantui Mintui NuTUI ...二.在vue3中全家桶技术栈
技术栈:vue3 vite pinia(或者vuex4)vue-router4 elementPlus
1.项目脚手架
(1) 使用 Vite 来创建一个 Vue 项目,npm init vuelatest这个命令会安装和执行 create-vue它是 Vue 提供的官方推荐脚手架工具
npm init vuelatest
npm init vue3
npm init vue2或者
npm create vue3
npm create vue2(2) Vue CLI方式和vue2构建方式一样,这样是依赖webpack构建,注意版本兼容
2.vue-router4
(1) 安装方式
npm install vue-router4
或者
yarn add vue-router4(2). 常用的API
createRouter 建一个可以被 Vue 应用程序使用的路由实例。查看 RouterOptions 中的所有可以传递的属性列表
createWebHistory 创建一个 HTML5 历史即单页面应用程序中最常见的历史记录。应用程序必须通过 http 协议被提供服务
createWebHashHistory 创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)或当配置服务器不能处理任意 URL 时这非常有用。
注意如果 SEO 对你很重要你应该使用 createWebHistory
import { createRouter, createWebHistory,createWebHashHistory } from vue-routerconst router createRouter({history: createWebHistory(),// history: createWebHashHistory(),routes: [{path: /,name: home,component: () import(../views/HomeView.vue)},{path: /about,name: about,component: () import(../views/AboutView.vue)}]
})export default routeruseRoute 返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用
useRouter 返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。
路由跳转示例
script langts setup
import { useRouter } from vue-router;const router useRouter()// 字符串路径
router.push(/users/eduardo)// 带有路径的对象
router.push({ path: /users/eduardo })// 命名的路由并加上参数让路由建立 url
router.push({ name: user, params: { username: eduardo } })// 带查询参数结果是 /register?planprivate
router.push({ path: /register, query: { plan: private } })// 带 hash结果是 /about#team
router.push({ path: /about, hash: #team })/script 路由接受参数示例
script langts setup
import { useRoute } from vue-router;// 接收参数
const username route.params.username// 带查询参数
const plan route.query.plan// 带查询参数
const plan route.query.plan// 带 hash
const hash route.hash
/script 3.状态管理
(1) vuex4 - 目前兼容vue3
vuex的基本5大核心概念
State
Getter
Mutation
Action
Modulevuex4的安装
npm install vuexnext --save 或者 yarn add vuexnext --save基本用法示例
modules/moduleTest.js 模块
export default { state () {return {count: 0}},mutations: {// 负责修改state中的count值countMutations (state, newVal) {state.count newVal}},actions: {countActions ({ commit }, params) {// 触发mutations中的countMutations函数并传递参数commit(countMutations, params)}}
}store/index.js
import { createStore } from vuex
import moduleTest from ./modules/moduleTest// 创建一个新的 store 实例
export default createStore({state () {return {sum: 0}},mutations: {// 负责修改state中的count值sumMutations (state, newVal) {state.sum newVal}},actions: {sumActions ({ commit }, params) {// 触发mutations中的countMutations函数并传递参数setTimeout((){commit(sumMutations, params)},300)}},getters: {getSum: state state.sum},modules: {moduleTest}
})src/main.js入口文件
import { createApp } from vue;
import App from ./App.vue;
import store from ./store;createApp(App).use(store).mount(#app);vue3混合API使用vuex方式
script setup langtsimport { computed,ref } from vueimport { mapState,useStore} from vuexconst {commit,dispatch,state,getters,actions} useStore();const count ref(0)const inp1 ref(0)const inp2 ref(0)// 映射 this.count 为 store.state.countconst getStateCount computed(() state.moduleTest.count)const getStateSum computed(() state.sum)// 点击按钮操作数据修改const addCountMutations () {commit(countMutations,count.value)}const addCountActions () {dispatch(countActions, count.value)}const addSumMutations () {commit(sumMutations,Number(inp1.value) Number(inp2.value))}const addSumActions () {dispatch(sumActions, Number(inp1.value) Number(inp2.value))}/scripttemplatemaindiv stylemargin-bottom:20pxspanstate: 展示count的值 {{getStateCount}}/spanspangetters: 展示count的值 {{getters.count}}/spanbrbutton clickaddCountMutations点击Mutations/buttonbutton clickaddCountActions点击Actions/buttonbr/divinput v-modelinp1/input v-modelinp2/brbutton clickaddSumMutations求和mutations同步方式/buttonbutton clickaddSumActions求和actions异步方式/buttonbrspan获取两个input框求和结果:state{{ getStateSum }} getters{{getters.getSum}}/span/main
/template
(2) pinia状态管理
为什么要使用 Pinia使用pinia的有什么优势?
dev-tools 支持 跟踪动作、突变的时间线 Store 出现在使用它们的组件中 time travel 和 更容易的调试 热模块更换 在不重新加载页面的情况下修改您的 Store 在开发时保持任何现有状态 插件使用插件扩展 Pinia 功能 为 JS 用户提供适当的 TypeScript 支持或 autocompletion 服务器端渲染支持
与 Vuex 的比较
与 Vuex 相比Pinia 提供了一个更简单的 API具有更少的规范提供了 Composition-API 风格的 API最重要的是在与 TypeScript 一起使用时具有可靠的类型推断支持。此外,pinia已经实现vuex5大部分功能因此pinia可以被称为vuex5。
pinia在vuex上基础上不同:
一是去掉 mutations它的存在显得流程过于复杂和冗余 二是不再需要注入、导入函数、调用函数、享受自动完成功能 三是无需动态添加 Store默认情况下它们都是动态的 四是不再有 modules 的嵌套结构 五是 没有 命名空间模块。鉴于 Store 的扁平架构“命名空间” Store 是其定义方式所固有的您可以说所有 Store 都是命名空间的。
在vue3项目如何安装和注册pinia
安装
yarn add pinia
# 或者使用 npm
npm install pinia引入main.ts入口文件
import { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./routerconst app createApp(App)app.use(createPinia())
app.use(router)app.mount(#app)在store仓库中使用
stores/counter.ts 文件中定义
函数方式一
import { ref, computed } from vue;
import { defineStore } from pinia;const useCounterStore defineStore(counter, () {// state定义状态变量countconst count ref(0);// getters中获取计算结果 doubleCountconst doubleCount computed(() count.value * 2);// actions直接操作state状态变量修改function increment() {count.value;}return { count, doubleCount, increment };
});
对象方式二
import { defineStore } from pinia;
export const useCounterStore defineStore(counter,{// state定义状态变量countstate: () ({ count: 0 }),// getters中获取计算结果 doubleCountgetters: {doubleCount: state state.count * 2},// actions直接操作state状态变量修改actions: {increment() {this.count;}}
});
在vue组件中引入并使用
templatep展示count: {{counterStore.count}}/pp展示getters计算结果: {{counterStore.doubleCount}}/pel-button clickchangeCountHanlder修改count/el-button
/templatescript setup langts
import { useCounterStore } from /stores/counter;// 获取useCounterStore仓库
const counterStore useCounterStore()// 触发actions修改state中的count值
const changeCountHanlder () {counterStore.$patch({count: counterStore.count})
}/script
