一、使用vite初始化项目
一)初始化项目
二)使用git进行管理
1、git init
2、git status
3、git add.
4、git commit -m'v0--项目初始化'
三)清除默认内容
1、删除component目录下的hello world组件
2、删除App.vue中引入的hello-world组件、清空template以及style中的内容
3、删除根目录下的style.css文件(以及main.ts中的引用)
4、'App.vue' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.Vetur(1208)
通过借鉴文章解决 blog.csdn.net/Trees__/art…
5、报错
卸载vscode中的vuter插件
二、安装并使用element-ui- plus
一)安装
二)引入
三)国际化
1、引入 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, { locale: zhCn, })
2、引入时报错
通过借鉴该文章解决了问题
blog.csdn.net/xiebaochun/…
在vite-env.d.ts文件中添加解决
declare module 'element-plus/dist/locale/zh-cn.mjs'
{
const content: any
export = content
}
三、安装配置router
(参考b站写网页的叮叮--【已完结】2022年最新版Vue3全套教程(超细致月嫂级教程,包教包会)--53集)
一)安装
在官网查询到安装命令yarn add vue-router@4
二)新建路由表
在src文件夹下新建router文件夹并在router文件夹中新建index.ts文件
import { createRouter, createWebHashHistory } from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{ path: '/', component: Home }, { path: '/about', component: About },]
// 3. 创建路由实例并传递
routes配置// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(), routes, // `routes: routes` 的缩写})
export default router
三)新建About.vue和Home.vue文件,并改写App.vue
四)在main.ts引入router