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等的配置。

最后，感谢您的阅读。

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

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