Vue 3.0 全家桶
vue: Beta vue-router: Alpha vuex: Alpha vue-class-component: Alpha
vue-cli: Experimental support via vue-cli-plugin-vue-next
eslint-plugin-vue: Alpha vue-test-utils: Alpha vue-devtools: WIP jsx:
WIP 可以看到 Vue 3.0 beta 版本是一个项目系列,包含了我们在开发过程中需要的套件、webpack
插件等等,本文将带大家快速搭建基于 Vue 3.0 的项目框架,这和之前很多 Vue 3.0 的 Demo
不同,是具备商业化项目能力的框架,本文将包括以下内容: 基于 vue-cli 快速搭建 Vue 3.0 项目 Vue 3.0 基本特性体验
集成 vue-router 和 vuex 4.0
Vue 3.0 项目初始化
Vue 3.0 项目初始化过程和 Vue 2.0 类似,具体步骤如下:
Vue 项目初始化
第一步,安装 vue-cli:
npm install -g @vue/cli
注意以下命令是错误的!
npm install -g vue
npm install -g vue-cli
安装成功后,我们即可使用 vue 命令,测试方法:
$ vue -V
@vue/cli 4.3.1
第二步,初始化 vue 项目:
vue create vue-next-test
输入命令后,会出现命令行交互窗口,这里我们选择 Manually select features:
Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)
❯ Manually select features
随后我们勾选:Router、Vuex、CSS Pre-processors 和 Linter / Formatter,这些都是开发商业级项目必须的:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: ◉ Babel◯ TypeScript◯ Progressive Web App (PWA) Support◉ Router◉ Vuex◉ CSS Pre-processors
❯◉ Linter / Formatter◯ Unit Testing◯ E2E Testing
注意:Vue 3.0 项目目前需要从 Vue 2.0 项目升级而来,所以为了直接升级到 Vue 3.0 全家桶,我们需要在 Vue 项目创建过程中勾选 Router 和 Vuex,所以避免手动写初始化代码
回车后会自动安装依赖,为了加速安装速度,我们可以使用淘宝源来加快初始化速度:
vue create -r https://registry.npm.taobao.org vue-next-test
项目创建完毕后,目录结构如下:
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src├── App.vue├── assets│ └── logo.png├── components│ └── HelloWorld.vue├── main.js├── router│ └── index.js├── store│ └── index.js└── views├── About.vue└── Home.vue
升级 Vue 3.0 项目
目前创建 Vue 3.0 项目需要通过插件升级的方式来实现,vue-cli 还没有直接支持,我们进入项目目录,并输入以下指令:
cd vue-next-test
vue add vue-next
执行上述指令后,会自动安装 vue-cli-plugin-vue-next 插件(查看项目代码),该插件会完成以下操作:
安装 Vue 3.0 依赖
更新 Vue 3.0 webpack loader 配置,使其能够支持 .vue 文件构建(这点非常重要)
创建 Vue 3.0 的模板代码
自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本,如果未安装则不会升级
自动生成 Vue Router 和 Vuex 模板代码
完成上述操作后,项目正式升级到 Vue 3.0,注意该插件还能支持 typescript,用 typescript 的同学还得再等等。
Vue 3.0 基本特性体验
下面我们从项目开发的角度逐步体验 Vue 3.0 的开发流程
创建路由
项目开发中,我们通常需要创建新页面,然后添加路由配置,我们在 /src/views 目录下创建 Test.vue:
<template><div class="test"><h1>test page</h1></div>
</template><script>export default {}
</script><style lang="less" scoped>
.test {color: red;
}
</style>
之后在 /src/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',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')},{path: '/test',name: 'Test',component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router
初始化 Vue Router 的过程与 3.0 版本变化不大,只是之前采用构造函数的方式,这里改为使用 createRouter 来创建 Vue Router 实例,配置的方法基本一致,配置完成后我们还需要在 App.vue 中增加链接到 Test.vue 的路由:
<template><div id="app"><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |<router-link to="/test">Test</router-link></div><router-view/></div>
</template>
启动项目:
在浏览器中访问项目地址,此时已经可以跳转到 Test 页面:
状态和事件绑定
Vue 3.0 中定义状态的方法改为类似 React Hooks 的方法,下面我们在 Test.vue 中定义一个状态 count:
<template><div class="test"><h1>test count: {{count}}</h1></div>
</template><script>import { ref } from 'vue'export default {setup () {const count = ref(0)return {count}}}
</script>
Vue 3.0 中初始化状态通过 setup 方法,定义状态需要调用 ref 方法。接下来我们定义一个事件,用来更新 count 状态:
<template><div class="test"><h1>test count: {{count}}</h1><button @click="add">add</button></div>
</template><script>import { ref } from 'vue'export default {setup () {const count = ref(0)const add = () => {count.value++}return {count,add}}}
</script>
这里的 add 方法不再需要定义在 methods 中,但注意更新 count 值的时候不能直接使用 count++,而应使用 count.value++,更新代码后,点击按钮,count 的值就会更新了:
计算属性和监听器
Vue 3.0 中计算属性和监听器的实现依赖 computed 和 watch 方法:
<template><div class="test"><h1>test count: {{count}}</h1><div>count * 2 = {{doubleCount}}</div><button @click="add">add</button></div>
</template><script>import { ref, computed, watch } from 'vue'export default {setup () {const count = ref(0)const add = () => {count.value++}watch(() => count.value, val => {console.log(`count is ${val}`)})const doubleCount = computed(() => count.value * 2)return {count,doubleCount,add}}}
</script>
计算属性 computed 是一个方法,里面需要包含一个回调函数,当我们访问计算属性返回结果时,会自动获取回调函数的值:
const doubleCount = computed(() => count.value * 2)
监听器 watch 同样是一个方法,它包含 2 个参数,2 个参数都是 function:
watch(() => count.value, val => {console.log(`count is ${val}`)})
第一个参数是监听的值,count.value 表示当 count.value 发生变化就会触发监听器的回调函数,即第二个参数,第二个参数可以执行监听时候的回调
获取路由
Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例,然后通过 ctx 属性获得当前上下文,ctx.$router 是 Vue Router 实例,里面包含了 currentRoute 可以获取到当前的路由信息
<script>import { getCurrentInstance } from 'vue'export default {setup () {const { ctx } = getCurrentInstance()console.log(ctx.$router.currentRoute.value)}}
</script>
Vuex 集成
Vuex 的集成方法如下
定义 Vuex 状态
第一步,修改 src/store/index.js 文件:
import Vuex from 'vuex'export default Vuex.createStore({state: {test: {a: 1}},mutations: {setTestA(state, value) {state.test.a = value}},actions: {},modules: {}
})
Vuex 的语法和 API 基本没有改变,我们在 state 中创建了一个 test.a 状态,在 mutations 中添加了修改 state.test.a 状态的方法: setTestA
引用 Vuex 状态
第二步,在 Test.vue 中,通过计算属性使用 Vuex 状态:
<template><div class="test"><h1>test count: {{count}}</h1><div>count * 2 = {{doubleCount}}</div><div>state from vuex {{a}}</div><button @click="add">add</button></div>
</template><script>import { ref, computed, watch, getCurrentInstance } from 'vue'export default {setup () {const count = ref(0)const add = () => {count.value++}watch(() => count.value, val => {console.log(`count is ${val}`)})const doubleCount = computed(() => count.value * 2)const { ctx } = getCurrentInstance()console.log(ctx.$router.currentRoute.value)const a = computed(() => ctx.$store.state.test.a)return {count,doubleCount,add,a}}}
</script>
这里我们通过计算属性来引用 Vuex 中的状态:
const a = computed(() => ctx.$store.state.test.a)
ctx 是上节中我们提到的当前组件实例
更新 Vuex 状态
更新 Vuex 状态仍然使用 commit 方法,这点和 Vuex 3.0 版本一致:
<template><div class="test"><h1>test count: {{count}}</h1><div>count * 2 = {{doubleCount}}</div><div>state from vuex {{a}}</div><button @click="add">add</button><button @click="update">update a</button></div>
</template><script>import { ref, computed, watch, getCurrentInstance } from 'vue'export default {setup () {const count = ref(0)const add = () => {count.value++}watch(() => count.value, val => {console.log(`count is ${val}`)})const doubleCount = computed(() => count.value * 2)const { ctx } = getCurrentInstance()console.log(ctx.$router.currentRoute.value)const a = computed(() => ctx.$store.state.test.a)const update = () => {ctx.$store.commit('setTestA', count)}return {count,doubleCount,add,a,update}}}
</script>
这里我们点击 update a 按钮后,会触发 update 方法,此时会通过 ctx.$store.commit 调用 setTestA 方法,将 count 的值覆盖 state.test.a 的值
总结
通过我第一时间体验 Vue 3.0-beta 版本后,感觉 Vue 3.0 已经具备了商业项目开发的必备条件,语法精炼,不管是代码可读性还是运行效率都非常赞。但由于未深入使用,目前还无法提出更多问题,需要在项目实战中进一步发现和总结问题,再和大家分享交流.
Vue 3.0 全家桶相关推荐
- [转]vue全面介绍--全家桶、项目实例
慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 "简单却不失优雅,小巧而不乏 ...
- vue全面介绍--全家桶、项目实例
简介 "简单却不失优雅,小巧而不乏大匠". 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,"vue.js兼具angular.js和rea ...
- Vue2.0全家桶实现一个买买买提醒应用
vue全家桶实现的买买买前端 前言 之前嫌弃买买买的时候老是要在比价网站蹲点很麻烦...撸了Nodejs一个监控商品的小玩具,还撸了一个很丑的前端..勉强用了一阵时间...后来开始接触到vue.js, ...
- Vue2.0 全家桶开发的网页应用(参照吾记APP)
github链接 借鉴吾记APP,使用 vue2.0 vue-router vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp ...
- Vue全家桶实现一个购物Web App
好的生活,聚集美丽,成人之美!从现在做起!http://www.tuicool.com/articles/EBbmAjr 效果预览 :point_right:预览地址: 请点我!在线预览,手机浏览或切 ...
- Vue 2.0 开发流程 (全)
该文章用 vue2.0 全家桶详细的介绍了一个项目的整个流程 新手可以跟着做一遍 有不对的地方请指出, 谢谢 本项目以 饿了么APP 为例 更多技术文章请关注微博: 小贤笔记-简书 推荐阅读 Vue ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
- Vue全家桶 + webpack 构建单页应用初体验
文章指南 主题 承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...
- WEB前端 Vue 全家桶介绍
Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https: ...
最新文章
- spring boot项目 中止运行 最常用的几种方法
- Ubuntu18.04.4 报错Name or service not known
- PostgreSQL 10.1 手册_部分 II. SQL 语言_第 12 章 全文搜索_12.9. GIN 和 GiST 索引类型
- PAT甲级1122 Hamiltonian Cycle:[C++题解] 图论、模拟
- s4800扫描电镜的CSS3_日立S4800扫描电镜中文使用手册
- Android应用开发中的风格和主题(style,themes)
- 粉碎文件软件测试大乐,软件测试基础(面试)(27页)-原创力文档
- 这篇文章写给想学计算机视觉还没开始的人
- zte中兴应用Java版下载_中兴link app下载
- 融云通讯服务器,融云IM即时通讯功能接入和部署方式有哪些_如何收费_企业服务汇...
- ​Win10磁盘管理​
- 计算机入门在线阅读,计算机应用基础教程(Windows 7+Office 2010)
- edvac是商用计算机吗,计算机的基础作业1
- 每天上下班之前读一遍,直到铭记在心……
- word文档中的水印怎样去除?这三个方法教大家快速搞定!
- 什么是 reactor 模式
- Android TV开发(—)开始电视应用
- matlab生成向量和矩阵
- 索引重建的必要性与影响 (文档 ID 1525787.1)
- java toast_详解Android中的Toast源码