使用vite+vue3.0搭建项目

1. 全局安装create-vite-app

yarn global add create-vite-app@1.18.0

2.创建项目目录

cva vue3-ui
或者
create-vite-app vue3-ui

Vue 2 和 Vue 3 的区别

90% 的写法完全一致，除了以下几点

• Vue 3 的 Template 支持多个根标签，Vue 2 不支持
• Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
• createApp(组件)，new Vue({template, render})

3.引入Vue Router4

3.1. 使用命令行查看vue-router 所有版本号

npm info vue-router versions

安装最新的vue-router@4.0.0-beta.6

yarn add vue-router@4.0.0-beta.6

3.2. 初始化vue-router
1). 新建 history 对象

import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()

2). 新建 router 对象

const router = createRouter()

3). 引入 TypeScript
把main.js文件改为main.ts，我们会发现有很多报错
报错1：createRouter里面需要传入一个参数，但我们却传入了0个
解决：

const router = createRouter({
  history,
  routes: [
    { path: '/', component: Lifa }
  ]
})

报错2：.vue类型的文件提示cannot find module xxx.vue
原因ts只能理解.ts为后缀的文件，无法理解.vue文件
解决方法：

• Google 搜索 Vue 3 can not find module
• 创建 xxx.d.ts，告诉 TS 如何理解 .vue 文件
• src/shims-vue.d.ts

declare module '*.vue' {
  import { Component } from 'vue'
  const component: Component
  export default component
}

这里要注意如果我们用的是vscode这时报错已经没了，但是如果我们用的是webstrom编辑器它还是会报同样的错误，我们需要再额外的安装ts，然后初始化ts配置

yarn add typescript -D
tsc --init

这样报错就会解决了
4). 使用router

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

5). 添加 <router-view>

• App.vue

<template>
  <div>hi</div>
  <router-view/>
</template>

<script>

export default {
  name: 'App'
}
</script>

6). 添加 <router-link>

<div>导航栏 |
    <router-link to="/">lifa</router-link>
    <router-link to="xxx">lifa2</router-link>
</div>

4. 安装sass

yarn add sass

发现控制台报错

解决方法：
4.1 打开package.json
4.2. 把dependencies里的sass这一行，移到devDependencies

4.3. 重新运行yarn install