赞
踩
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。
npm init vite@latest || yarn create vite // 提示需要安装create-vite@latest Need to install the following packages: create-vite@latest Ok to proceed? (y) y // 项目名称 ? Project name: » vite-project // 选择框架 ? Select a framework: » - Use arrow-keys. Return to submit. vanilla > vue react preact lit svelte ? Select a variant: » - Use arrow-keys. Return to submit. vue > vue-ts cd vite-project npm i npm run dev
npm install vue-router@4
配置vue-router
在项目src
目录下面新建router
目录,然后添加index.ts
文件,在文件中添加以下内容
import { createRouter, createWebHashHistory } from 'vue-router'
// 在 Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
// 路由地址
routes: []
})
npm install vuex@next
在项目src
目录下面新建store
目录,并添加index.ts
文件,文件中添加以下内容
import { createStore } from 'vuex'
interface State {
userName: string
}
export default createStore({
state:{
userName:'王大合'
}
});
在main.ts
中引入 vue-router
和 vuex
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
createApp(App).use(router).use(store).mount('#app')
npm install eslint --save-dev eslint --init // 如何使用ESLint ? How would you like to use ESLint? (Use arrow keys) To check syntax only // 只检查语法 > To check syntax and find problems // 检查语法和发现问题 To check syntax, find problems, and enforce code style // 检查语法、发现问题并实施代码样式 //您的项目使用什么类型的模块 ? What type of modules does your project use? (Use arrow keys) > JavaScript modules (import/export) // JavaScript模块 CommonJS (require/exports) // CommonJS None of these // 其他 //您的项目使用哪个框架(根据情况选择) ? Which framework does your project use? (Use arrow keys) React > Vue.js None of these //项目是否使用TypeScript ? Does your project use TypeScript? (y/N) ? Where does your code run? //您的代码在哪里运行 (空格选中、a全选 i反选) >(*) Browser // 浏览器 ( ) Node // node ? What format do you want your config file to be in? (Use arrow keys) //您希望生成的配置文件是什么格式的 JavaScript YAML > JSON // 具有一下依赖项 是否安装 The config that you've selected requires the following dependencies: eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest ? Would you like to install them now with npm? (Y/n)
打开.eslintrc.json
适当修改
{ "env": { "browser": true, "es2021": true, // 解决 defineProps和defineEmits 生成 no-undef警告; "vue/setup-compiler-macros": true }, "extends": [ "eslint:recommended", "plugin:vue/essential", "plugin:@typescript-eslint/recommended" ], "parserOptions": { "ecmaVersion": "latest", "parser": "@typescript-eslint/parser", "sourceType": "module" }, "plugins": [ "vue", "@typescript-eslint" ], // 添加自定义规则 "rules": { "@typescript-eslint/no-explicit-any": ["off"], // 关闭any类型的警告 "key-spacing": [0, { "beforeColon": false, "afterColon": true }], //对象字面量中冒号的前后空格 "vue/no-v-model-argument": 0, // 解决v-model:props编辑器报错 "array-bracket-spacing": ["error","always"], // 强制在括号内使用空格 "object-curly-spacing": ["error","always"] // 强制在花括号中使用一致的空格 } }
npm install sass
npm install sass-loader
在 compilerOptions 下增加如下配置
// 解析非相对模块的基地址,默认是当前目录
"baseUrl": ".",
//路径映射,相对于baseUrl
"paths": { "@/*": [ "src/*" ] }
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import {resolve} from "path"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 使用相对地址 base:'./', resolve: { // 设置@符号全局路径 alias: { '@': resolve(__dirname, './src') } }, server: { // 跨域配置 proxy: { '/api': { target: 'http://localhose:8033', // 接口域名 changeOrigin: true, rewrite: (path: string) => path.replace(/^\/api/, '') } } }, css:{ preprocessorOptions: { scss: { // 配置全局样式 additionalData: `@import "./src/assets/style/theme.scss";` } } } })
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。