vue3.0+vite+router搭建项目

一、开发环境：

（1）、去Node.js 官网安装node

1、安装 Node.js >=12.0.0

（2）、配置git bash

npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false

（3）安装yarn（yarn比npm更加好用）

yarn:npm install -g yarn

（4）、安装yarn淘宝源和npm淘宝源
yarn设置镜像:

yarn config set registry https://registry.npm.taobao.org -g
yarn config set disturl https://npm.taobao.org/dist -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g

npm设置为淘宝镜像

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/

二、搭建vite项目

（1）、安装全局vite

yarn global add  create-vite-app   （好像失效了）

可以改成这个创建

 yarn create vite   或者 npm create vite@latest

安装成功

安装成功之后有两个指令create-vite-app+项目名或cva+项目名，用于创建项目。

（2）、创建项目（项目名：mangoUI）

cva  mangoUI

创建成功

创建成功之后有三个指令cd mangoUI和yarn install，yarn dev依次执行，项目创建成功。

注意：使用vscode打开最好安装一个插件：Vue 3 snippets，方便模板建立。

三、配置路由router

（1）、查看所有路由版本：

npm info vue-router versions

查看路由版本

与Vue3目前搭配的路由版本vue-router>=4.0.0

（2）、安装路由（vue-router>=4.0.0）

yarn add [email protected]

（3）、初始化路由

• 新建history对象
• 新建router对象
• app.use(router)
• 添加
• 添加

情景一：打开main.js，初始化路由。

main.js初始化路由

情景二：（使用ts语法）将main.js改成main.ts，初始化路由。别忘了index.html引用main.js路径后续要改成main.ts。

main.ts初始化路由

这时组件引用路径会报一个错误，这是因为Typescript只能理解.ts文件，不能理解.vue文件。

找不到模块

解决报错方法：在根目录新建目录shims-vue.d.ts，告诉TS如何理解.vue文件

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

如果关闭shims-vue.d.ts还是报错，再在根目录创建一个 tsconfig.json 文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}