vue3.0的简单了解

1. 构建项目

npm init vite-app demo  //构建项目列表
cd demo   //进入目录
npm install  //下载依赖
npm run dev  //启动项目

2. 添加vue-Router

cnpm install vue-router@next -S
//下载完成后在src目录下新建router文件夹，创建index。js文件添加如下内容
import {
    
    createRouter, createWebHashHistory} from 'vue-router'

export default createRouter({
    
    
  history: createWebHashHistory(),
  routes: []
})

3. main.js全局挂载

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'

createApp(App).use(router).mount('#app')

4. 添加vuex

cnpm i vuex@next -S
//同样在src目录下创建store文件夹，并创建index.js
import {
    
     createStore } from 'vuex'
export default createStore({
    
    
  state() {
    
    
    return {
    
    
      author: "十三",
    };
  },
});

//同样全局配置
import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './index.css'
// 链式调用
createApp(App).use(router).use(store).mount('#app')

5. 引入 Antd for Vue3 版本组件库

cnpm i --save ant-design-vue@next -S
//在main.js引入ant-design-vue
import {
    
     createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'
import router from './router'
import store from './store'
import 'ant-design-vue/dist/antd.css';
import './index.css'

// 本教程采用的是全局引入组件库

createApp(App).use(router).use(store).use(Antd).mount('#app')