vue 3.0 + vite 搭建项目

1. 全局安装create-vite-app

yarn global add [email protected]

2. 创建项目目录

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

vue2 和vue3 百分之九十是一样的出来以下几点

• 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

安装最新的[email protected]

yarn add [email protected]

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文件
解决方法：

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

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

yarn add typescript -D
tsc --ini

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

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

5). 添加
App.vue

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

<script>

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

6). 添加

<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

"dependencies":{
	"vue":"^3.0.0-rc.1",
	"vue-router":"4.0.0-beta.3"
},
"devDependencies":{
	"sass":"1.26.10",
	"@vue/compiler-sfc":"^3.0.0-rc.1",
	"vite":"^1.0.0-rc.1"
}

4.3. 重新运行yarn install