vite+vue3环境搭建

一 vite

一个由 vue 作者尤雨溪专门为 vue 打造的开发利器，其目的是使 vue 项目的开发更加简单和快速。
作者原话： Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

二 安装vite并创建项目

1. 全局安装create-vite-app

yarn global add create-vite-app@1.18.0

2. 创建项目

create-vite-app yourprojectname
或
cva yourprojectname

3. 启动项目

yarn
yarn dev

三 安装并使用vue-router

1. 安装

yarn add vue-router

2. 在main.js中添加如下代码

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import {createWebHashHistory,createRouter} from 'vue-router'
import Moon from './components/Moon.vue'
import HelloWorld from './components/HelloWorld.vue'

const history=createWebHashHistory();
const router=createRouter(
  {
    history:history,
    routes:[
    //Moon组件改为你自己的某个组件
      {path:'/',component:Moon}
      {path:'/hello',conponent:HelloWorld}
    ]
  }
);

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

4. 如果使用ts,此时会提示如下报错(js可跳过此步骤) ts不认识vue文件， 解决方法：在src目录下新建一个shims-vue.d.ts，告诉ts如何理解vue文件

declare module '*.vue'{
  import {ComponentOptions} from 'vue'
  const componentOptions:ComponentOptions
  export default componentOptions
}

5. APP.vue中添加

<template>
  //看这儿
  <div>
    |<router-link to="/">Moon</router-link>
    |<router-link to="/hello">Hello</router-link>
  </div>
  <router-view/>
</template>

<script>
import Moon from "./components/Moon.vue";

export default {
  name: "App",
  components: {
    Moon
  },
};
</script>

6. 点击Moon会访问路径"/"从而渲染Moon组件，点击Hello访问路径"/hello"会渲染HelloWorld组件（根据自己项目确定路由及组件）。