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中修改代码：

<template>  <!--Vue3组件中的模板结构可以没有根标签-->  <router-view /></template>

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

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

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

最后，感谢您的阅读。

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

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