yarn create @vitejs/app
// 挂载less
yarn add less less-loader -D
// 引入Prettier 自动格式化代码
yarn add prettier -D
// 引入vue-router
yarn add vue-router@4 -D
// 引入Pinia
yarn add pinia -D
vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": resovePath("src"),
"@views": resovePath("src/views"),
},
},
css: {
preprocessorOptions: {
// sass variable and mixin
scss: {
additionalData: `@import "./src/plugins/klComponent/assets/css/constant.scss";`,
},
},
},
server: {
port: 3001, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true // 允许跨域
proxy: {
"/api": {
target: "http://www.lingchen.kim:8888",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
// base: '/demo/'
});
function resovePath(paths) {
return path.resolve(__dirname, paths);
}
tsconfig.json常用配置
// 常用配置
{
/*
tsconfig.json是ts编译器的配置文件，ts可以根据它的信息来对待吗进行编译 可以再tsconfig中写注释
include : 用来指定哪些文件需要被编译
exclude : 用来指定哪些文件不需要被编译 ：默认node_module
extends : 用来指定继承的配置文件
files : 用来指定被编译的文件列表，只有编译少量文件才使用
compilerOptions : 编译器的选项是配置文件中非常重要也是非常复杂的配置选项
*/
"include":[
// ** : 任意目录 ， * : 任意文件
"./src/**/*"
],
"exclude": [
"./src/hello/**/*"
],
// "extends": "./configs/base",
"files": [
"1.ts",
// "2.ts"
],
"compilerOptions": {
// 用来指定 ES 版本 ESNext : 最新版。 'ES3', 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNext'
"target": "ES2020",
// 指定要使用模块化的规范 : 'None', 'CommonJS', 'AMD', 'System', 'UMD', 'ES6'/'ES2015', 'ES2020' or 'ESNext'
"module": "ESNext",
// 用来指定项目中要使用的库 'ES5', 'ES6', 'ES2015', 'ES7', 'ES2016', 'ES2017', 'ES2018', 'ESNext', 'DOM', 'DOM.Iterable',
// 'WebWorker', 'ScriptHost', 'ES2015.Core', 'ES2015.Collection', 'ES2015.Generator', 'ES2015.Iterable',
// 'ES2015.Promise', 'ES2015.Proxy', 'ES2015.Reflect', 'ES2015.Symbol', 'ES2015.Symbol.WellKnown',
// 'ES2016.Array.Include', 'ES2017.object', 'ES2017.Intl', 'ES2017.SharedMemory', 'ES2017.String',
// 'ES2017.TypedArrays', 'ES2018.Intl', 'ES2018.Promise', 'ES2018.RegExp', 'ESNext.AsyncIterable',
// 'ESNext.Array', 'ESNext.Intl', 'ESNext.Symbol'
// 运行在浏览器中不用设置，运行在node或其他中才需要设置
// "lib":[]，
// 用来指定编译后文件的存放位置
"outDir":"./dist",
// 将代码合并为一个文件,设置之后所有的全局作用域中的代码会合并到同一个文件中 但是只能在 'amd' and 'system' 中才能使用
// "outFile": "./dist/app.js",
// 是否对js文件进行编译，默认false
"allowJs": false,
// 是否检查js代码是否符合语法规范，默认false
"checkJs": false,
// 是否移除注释，默认false
"removeComments":false,
// 是否不生成编译后文件，默认false
"noEmit": false,
// 当有错误时是否生成文件，默认false
"noEmitOnError": false,
// 是否生成sourceMap，默认false 这个文件里保存的，是转换后代码的位置，和对应的转换前的位置。有了它，出错的时候，通过断点工具可以直接显示原始代码，而不是转换后的代码。
"sourceMap":false,
// 所有的严格检查的总开关，默认false
"strict": false,
// 编译后的文件是否开启严格模式，默认false
"alwaysStrict": false,
// 不允许隐式的any，默认false(允许)
"noImplicitAny": false,
// 不允许隐式的this，默认false(允许)
"noImplicitThis": false,
// 是否严格的检查空值，默认false 检查有可能为null的地方
"strictNullChecks": true,
// 是否严格检查bind、call和apply的参数列表，默认false 检查是否有多余参数
"strictBindCallApply":false,
// 是否严格检查函数的类型，
"strictFunctionTypes":false,
// 是否严格检查属性是否初始化，默认false
"strictPropertyInitialization":false,
// 是否检查switch语句包含正确的break，默认false
"noFallthroughCasesInSwitch":false,
// 检查函数没有隐式的返回值，默认false
"noImplicitReturns":false,
// 是否检查检查未使用的局部变量，默认false
"noUnusedLocals":false,
// 是否检查未使用的参数，默认false
"noUnusedParameters":false,
// 是否检查不可达代码报错，默认false true，忽略不可达代码 false，不可达代码将引起错误
"allowUnreachableCode":false
}
}
// 最全配置
// https://www.tslang.cn/docs/handbook/compiler-options.html
Prettier配置
// prettier.config.js or .prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: false,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
}
main.ts配置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
createApp(App).use(router).use(createPinia()).mount('#app')
常见问题
找不到模块**或其相应的类型声明？
declare module '*.vue' {
import { App, defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent> & {
install(app: App): void
}
export default component
}
参考文档
