"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} --cache --fi...
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}from'vite'/...
1、修改vite.config.ts import{defineConfig}from 'vite'import vue from '@vitejs/plugin-vue'import path from "path";//这个path用到了上面安装的@types/node// https://vitejs.dev/config/export default defineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve('./src')//@代替src}}})...
一、项目目录结构分析 这个项目的目录如下所示: 项目目录 其中assets目录下是图片资源以及css文件,components下为各个组件,views下为各个前端展示的页面,vuex下是用户信息的管理,采用的是Vuex的状态管理模式,routers.js为路由相关的定义,filters.js为过滤器,入口即是main.js。 运行项目后的效果如下: 效果 二、项目加载...
1、修改vite.config.ts 2、修改tsconfig.app.json (ts) 在compilerOptions中添加下面的最后2项:“baseUrl"和"paths” 添加下面代码 "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } 13.项目结构,在src文件夹下,添加api,router ,store,views文件夹 ...
在我们项目中引入自定义组件或者JS\TS文件,我们会采用相对路径来寻找,比如: importBookfrom'../components/Bppk.vue' 这个配置在Vue\cli脚手架中默认可以使用,但是在Vite搭建的Vue3项目中我们需要配置一下; 整体配置如下: // vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{UserConfig,ConfigEnv,loadEnv...
1 npm init @vitejs/app my-vue-app --template vue-ts 初始化项目1 2 npm install npm run dev** 配置路由**1.安装vue-router的时候一定要带上版本号,否则现在安装的还是3.x的版本1 npm install vue-router@4 2.在src/新建文件夹router,并在router文件加下新建index.ts文件:...
一、项目搭建与配置引入 用到的库:vue3 ts vite less pinia vue-router axios element-plus 1.创建项目 yarn create vite 运行完成以后 输入项目名称和使用框架就创建好了 2.添加各种依赖 创建项目是就引入了vue3 ts vite了,就不用了我们自己装了
1.使用Vite初始化项目 使用命令行工具在目标文件夹中执行下方命令,也可以直接在vscode的控制台中,我个人比较习惯前者,后续就直接在vscode中安装插件了 代码语言:javascript 复制 yarn create @vitejs/app 运行命令后出现下方界面,输入项目名称,然后我们选择vue-ts这个选项,回车确定之后很快就会生成一个文件夹 ...