首先使用vite创建一个vue项目
使用以下命令创建一个vue项目 项目名为vueproductdeom
npm init vite@latest vueproductdeom -- --templete vue-ts
选择Vue
语言选择ts
对于ts,还有修改文件配置,无法直接打开项目
安装 @types/node
npm install @types/node --save-dev
配置vite.config.ts文件
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
port: 5000 // 你需要定义的端口号
},
resolve: {
// 配置路径别名, @就代表当前项目的绝对路径
// __dirname是一个全局变量,表示当前模块所属目录的绝对路径
// path.resolve返回一个以相对于当前的工作目录(working directory)的绝对路径,
alias: {
'@': path.resolve(__dirname, './src'),
}
},
})
到这里就可以使用
npm run dev
启动项目了。
接下来安装一些必要的组件和简单使用
将App.vue,HelloWorle.vue,style.css文件中的内容删除,我用不到。
2安装路由并配置
npm install vue-router@4
创建router目录,创捷index.ts文件,在index.tx文件写路由信息、
在tsconfig.ts文件中加入上图配置
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
以下为一个简单的路由
import {
createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: () => import("@/views/Index.vue"),
meta: {
title: '首页' }
}
]
const router