vue3.0+vite+router搭建项目

第一步：安装vite （1）、去Node.js 官网安装node

1、安装 Node.js >=12.0.0

二、搭建vite项目

（1）、安装全局vite

npm install -g create-vite-app 第二步：创建项目 创建基于 vite 的 vue3 项目，执行以下代码：

create-vite-app create-vite-app vue3-vite-demo 注意：此处可能会出现create-vite-app : 无法加载文件 C:\Users 的错误；

解决方法：

1、搜索框输入：Windos PowerShell 并且以管理员身份运行

2、打开了命令行之后,输入set-ExecutionPolicy RemoteSigned，并且把权限改权限为A，然后通过 get-ExecutionPolicy 查看当前的状态：

3、最后我们就可以使用命令创建项目了！

创建完成的项目结构是这样的：

package.json 中可以看到依赖非常少，只有 vite 和 @vue/compiler-sfc ，没有 babel，因为 vite 是通过浏览器去解析模块。

接下来需要手动下载依赖：

$ npm install 1

然后启动项目：

$ npm run dev 注意 vite dev server 默认端口是3000，这边改为了 8000 端口，后面会讲怎么改配置。

现在的项目只能用来写写 HelloWorld，还不能够进行实际的开发，下面来介绍一下项目配置。

2、引入vue-router 查看vue-router版本：

$ npm info vue-router versions 直接安装最新的版本vue-router：

$ npm install vue-router 在src目录下创建以下目录：

• src |- router ||- index.js |- views |- home.vue |- about.vue 在router -> index.js中添加如下代码：

import { createRouter, createWebHistory } from 'vue-router' ​ // 开启历史模式 // vue2中使用的mode：history 实现 ​ const routerHistory = createWebHistory(); ​ const router = createRouter({ history: routerHistory, routes: [ { path:'/', redirect:'/home' }, { path:'/home', component: () => import('../view/home.vue') }, { path:'/about', component: () => import('../view/about.vue') }, ] }) ​ export default router 在main.js中修改代码：

import { createApp } from 'vue' import App from './App.vue' import './index.css' // 引入路由 import router from "./router"; createApp(App).use(router).mount("#app"); 在App.vue中修改代码：

在重新启动，打开页面，就已经默认路由指向的页面了。

到这里，vue3.0+vite+router搭建项目就已经完成了。

下一篇，继续为大家分享一下vite.config.js和Element plus等的配置。

最后，感谢您的阅读。

你学到了什么，欢迎补充！！

欢迎大家留言讨论，祝工作顺利、生活愉快！