如何创建一个vue3的模板

一、使用vite初始化项目

为什么要用vite

为什么尤大大要推出vite，在我们使用webpack的时候，每次开发时候启动项目都需要几十秒甚至超过一分钟，比较慢，而且热更新也比较慢，而vite的主要特点就是快，官网对于vite的特点是这样描述的

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译 首先我们需要新创建一个项目模板

yarn create vite-app my-vue3

在终端执行以上代码之后输出如下内容，可以看到新建的项目特别快，仅仅用了1.69s

可以发现相较于之前创建速度明显快了许多

查看项目结构

打开main.js

发现创建Vue的方式变了，原来是通过new Vue的方法来初始化Vue，在Vue3.0中，修改为了通过createApp的方式

二、配置 vue-router

安装vue-router

yarn add vue-router -S

配置vue-router
在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

import {createRouter, createWebHashHistory} from 'vue-router'


// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

将router引入到main.ts中，main.ts文件内容如下

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


const  app = createApp(App)
// 通过use 将 路由插件安装到 app 中
app.use(router)
app.mount('#app')

三、配置 vuex

安装vuex
在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

yarn add vuex -S

配置vuex
在项目src目录下面新建store目录，并添加index.ts文件，文件中添加以下内容

import { createStore } from 'vuex'


interface State {
  userName: string
}


export default createStore({
  state(): State {
    return {
      userName: "搬砖",
    };
  },
});

引入到main.ts中

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


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

页面调用

template>
	<div>
		{{ state.userName }}
	</div>
</template>
<script>
 import { useStore } from 'vuex';

  setup(props, context) {
    const store = useStore();
    const state = reactive({
      userName: store.state.userName // 取值
    })
    return {
    	state
    }
  }
</script>