从0到1 搭建vue3.0 后台管理系统第一篇

废话

时间飞快，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写法

<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"
	}
}