This article has participated in the weekend study program, click the link to see details: juejin.cn/post/696572…

Write down this management background framework building process, hope to help the students who just started to work!

1. Project creation

1. Global scaffold installation, scaffold address:cli.vuejs.org/zh/guide/

npm install -g @vue/cli
Copy the code

2. Create a VUE project

vue create vue3
Copy the code

3. Select Settings

4. Bind the Git repository

Before binding, you need to create a Git repository on the code cloud

Git initial

git init
Copy the code

Check the file

git add .
Copy the code

note

git commit -m 'initial'
Copy the code

Binding online libraries

git remote add origin https://gitee.com/niuny/vue3.git
Copy the code

Check whether the binding is successful

git remote -v
Copy the code

Began to push

git push origin master --set-upstream
Copy the code

Now you can see your code in the online library

5. CD to your project and run it

cd vue3
npm run serve
Copy the code

When you see the image below, you are running successfully

Use the UI framework

Before we use it, let me show you our previous project structure

We used ant-design-vue and the address was:www.antdv.com/docs/vue/in…

npm install ant-design-vue --save
npm i --save ant-design-vue@next
Copy the code

After the current dependencies are loaded, let’s do some configuration of vue.config.js

babel.config.js

After this configuration, we introduce it in the main.ts file

import { Button } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
const plugins = [Button]
plugins.forEach(p= > app.use(p))
app.use(store).use(router).mount('#app')
Copy the code

So our early work is done, we can go to the page to verify,

Introduced button in the file home.vue,

Check out our page and see the same button as me, we are installed successfully!

Warehouse address: gitee.com/niuny/vue3

To be continued….