废话
时间飞快,vue3 陆陆续续也有一年时间的了,现在各种文档,五花八门的,官方的,也都基本齐全了,下面就来从0到1,实战一个vue3.0的后台管理系统,后面我会写所有的创建搭建步骤,至于里面的api就不详细说明(会给出具体文档,自行去看),这里直接搭建,给出具体代码
vue3.0问题看法和个人理解
1、要不要升级项目到3.0
个人觉得有必要,新项目建议直接使用3.0,既然都出3.0了,肯定相对2.0有它的过人之处,不需要解释,(ps:项目过大,架构师不想升级可以不升级,我就是划水运动员)
2、vue3.0的设计目标,及相对2.0的优化
- 目标笼统来说,更小,更快,支持TypeScript,提高维护性,开放更多底层功能
- 更小,移出了一些不常用的api,移入tree-shaking,可以将无用模块“剪辑”,仅打包需要的,使打包的整体体积变小了
- 更快,优化了diff算法,类似于react,更精准的去实现局部dom更新,编译优化,数据劫持优化
- 更好,在兼顾vue2的options API的同时还推出了composition API,大大增加了代码的逻辑组织和代码复用能力
正文开始
1、自己仓库里新建个项目,clone到本地,可以随时随地开发同步代码,预防丢失,没有的建议自己去注册一个,本人使用的是gitlab,gitee,推荐gitlab
2、安装cli脚手架,初始化项目(也可以使用vite)
1、npm install -g @vue/cli
2、vue create gdshop_admin
安装成功可以查看版本
切换到vue3,选项切换不了,加winpty vue.cmd解决
winpty vue.cmd create gdshop_admin
或者选择第三个manually,手动勾选安装
创建完成之后放到你的仓库文件夹里
目前cli版本是4.5.11显然不是我想要的最新的, 可以升级5.0超前版本
cnpm install -g @vue/cli@next
npm run serve 启动项目
3、安装路由vue-router4.0 (3.0不支持vue3)
vue ui 打开可视化操作面板安装(不用手动创建文件夹和文件)
或者
npm install vue-router@4 (安装4.0)
要手动创建文件夹 文件
4、vuex(3.0不支持vue3)
同上,ui面板安装
或者
npm install vuex@next --save (安装4.0)
手动创建文件夹文件
5、完成,目录结构如下
删除没用的helloword组件,图片啥的
home.vue 修改如下,尝试vue3 composition API写法
扫描二维码关注公众号,回复:
12529907 查看本文章
<template>
<div>
{
{count}}
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const count = ref(0)
return {
count
}
},
}
</script>
<style lang='less' scoped>
</style>
运行结果如下,到此完成一个vue3.0项目
下一篇(Composition Api优缺点,和api使用)
推荐文档
vscode 代码片段附上提高开发效率
{
"Print to console": {
"prefix": "sc",
"body": [
"<template>",
" <div>",
" {
{count}}",
" </div>",
"</template>",
"",
"<script>",
"import { ref } from 'vue'",
"export default {",
" setup () {",
" const count = ref(0)",
" return {",
" count",
" }",
" },",
"}",
"</script>",
"<style lang='less' scoped>",
"",
"</style>"
],
"description": "Log output to console"
}
}