一、项目目录结构分析 这个项目的目录如下所示: 项目目录 其中assets目录下是图片资源以及css文件,components下为各个组件,views下为各个前端展示的页面,vuex下是用户信息的管理,采用的是Vuex的状态管理模式,routers.js为路由相关的定义,filters.js为过滤器,入口即是main.js。 运行项目后的效果如下: 效果 二、项目加载...
"scripts": { "dev": "vite --open", "build": "vue-tsc && vite build", "preview": "vite preview", "lint": "eslint src", "fix": "eslint src --fix", "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"", "lint:eslint": "eslint src/**/*.{ts,vue}...
// vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{UserConfig,ConfigEnv,loadEnv,defineConfig}from"vite";importpathfrom"path";constpathSrc=path.resolve(__dirname,"src");// https://vitejs.dev/config/exportdefaultdefineConfig(({mode}:ConfigEnv):UserConfig=>{return{resolve:{alias:...
1、修改vite.config.ts 2、修改tsconfig.app.json (ts) 在compilerOptions中添加下面的最后2项:“baseUrl"和"paths” 添加下面代码 "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } 13.项目结构,在src文件夹下,添加api,router ,store,views文件夹 配置vite-env.d.ts 文件 /// <reference ...
1.输入 npm createvite@latest 2.输入项目名字 3.项目创建 选择Vue 选择TypeScript 4. cd my_vue 到项目目录,准备安装依赖 5. npm install 安装依赖 6.运行项目 npm run dev 7.http://localhost:5173/打开页面 8.安装router 路由 npm installvue-router--save ...
yarn create @vitejs/app 选择vue- vue-ts 安装依赖 npm install 启动项目 npm run dev 修改Vite 配置文件 import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'import{ resolve }from'path'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins: [vue()],resolve: {alias: {'...
一、搭建项目 npm init vite@latest 踩坑:vite项目需要node版本大于16!!! 通过vite@latest创建的是vite3.0.7的版本 npm run dev启动项目 二、配置路径别名 踩坑:vite中不支持require()语法!!! 编辑vite.config.ts //如果报错就安装:npm install --save-dev @types/nodeimportpathfrom'path'import{defineConfig...
1.使用Vite初始化项目 使用命令行工具在目标文件夹中执行下方命令,也可以直接在vscode的控制台中,我个人比较习惯前者,后续就直接在vscode中安装插件了 代码语言:javascript 复制 yarn create @vitejs/app 运行命令后出现下方界面,输入项目名称,然后我们选择vue-ts这个选项,回车确定之后很快就会生成一个文件夹 ...
这样一个vue3+vite+ts的项目初始化就完成了 运行项目不会默认打开浏览器,需要在package.json里面 ,在vite 后面加上--open 安装vue全家桶 Pinia状态管理 由于vuex 4 对 typescript 的支持让人感到难过,所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员 ...