nonsense
Time is fast, vue3 has been one year after another, and now all kinds of documents, various and official, are basically complete, here is a vue3.0 background management system from 0 to 1. I will write all the steps to create and build. As for the api inside, I won’t explain it in detail (the specific documentation will be given, and I will look at it myself), just build it here and give the specific code.
vue3.0 problem views and personal understanding
1. Do you want to upgrade your project to 3.0?
I think it is necessary to use 3.0 directly for new projects. Since 3.0 is all released, it must have its advantages compared to 2.0. No explanation is needed. (ps: The project is too large, the architect If you don’t want to upgrade, you don’t need to upgrade, I’m a rower )
2. The design goal of vue3.0 and the relative optimization of 2.0
- Generally speaking, the goal is to be smaller and faster, support TypeScript, improve maintainability, and open more low-level functions
- Smaller, some uncommon apis are removed, and they are moved into tree-shaking. Useless modules can be "edited", and only what is needed is packaged, making the overall volume of the package smaller
- Faster, optimized diff algorithm, similar to react, more accurate to achieve local dom update, compilation optimization, data hijacking optimization
- Even better, while taking into account the options API of vue2, the composition API is also launched, which greatly increases the logical organization of the code and the ability to reuse code
Start of text
1. Create a new project in your own warehouse and clone it locally. You can develop synchronization code anytime and anywhere to prevent loss. If you don’t have one, I suggest you register one yourself. I use gitlab, gitee, recommend gitlab
2. Install cli scaffolding and initialize the project ( You can also use vite)
1、npm install -g @vue/cli
2、vue create gdshop_admin
After the installation is successful, you can check the version.
Switch to vue3, the option cannot be switched, add winpty vue.cmd to solve
winpty vue.cmd create gdshop_admin
Or choose the third manually, manually check the installation
and put it in your warehouse folder after the creation is complete
The current cli version is 4.5.11. Obviously it is not the latest I want. You can upgrade to the earlier version of 5.0.
cnpm install -g @vue/cli@next
npm run serve 启动项目
3. Install routing vue-router4.0 (3.0 does not support vue3)
vue ui 打开可视化操作面板安装（不用手动创建文件夹和文件）
或者
npm install vue-router@4 （安装4.0）
要手动创建文件夹 文件
4. Vuex (3.0 does not support vue3)
同上，ui面板安装
或者
npm install vuex@next --save (安装4.0)
手动创建文件夹文件
5. Finished, the directory structure is as follows.
Delete the useless helloword components, pictures and so on
home.vue is modified as follows, try vue3 composition API writing
<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>
The results of the operation are as follows, and now a vue3.0 project is completed
Next article (Pros and cons of Composition Api, and api use)
Recommended documents
Vscode code snippets are attached to improve development efficiency
{
"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"
}
}