vite2配置,搭建vue3+ts项目,vite中文文档
前言:21年2月17日,vite2 正式发布,它解决了 vite1 配置路径别名bug,并丰富了构建项目的内容,可以直接使用vite2构建 vue3+ts 的项目啦!
重点:vite现在有中文文档了!文档地址:vite.xilinglaoshi.com/
步骤一:初始化项目,选项介绍,项目目录介绍。
使用 NPM:
npm init @vitejs/app 复制代码
使用 Yarn:
yarn create @vitejs/app 复制代码
image
输入你想要的项目名称
image
这里我们选择vue3 + ts。至于最后一个说实话,我也孤陋寡闻了。
之后进入项目,然后install我就不多说了。
二、项目结构介绍
image
可以看到js文件全部变成ts文件,这里详细介绍两个文件。
shims-vue.d.ts:组件中导入.vue结尾的文件ts会报错,这个文件是声明一个ambient module(即:没有内部实现的 module声明)
vite.config.ts:这里是vite的配置项,相当于vue-cli的vue.config.js文件,这里可以配置路径别名,项目跨域代理配置等。
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';const path = require('path');export default defineConfig({ plugins: [vue()], alias: { '@': path.resolve(__dirname, './src'), }, server: { proxy: { // 如果是 /lsbdb 打头,则访问地址如下 '/sugrec': 'https://www.baidu.com', // 如果是 /lsbdb 打头,则访问地址如下 '/lsbdb': { target: 'https://www.baidu.com', changeOrigin: true, // rewrite: path => path.replace(/^\/lsbdb/, '') }, }, },});复制代码
贴一份超简单的配置。
router、vuex、less、axios等各位就按照各自所需自行安装吧
npm install vue-i18n@next npm install vue-router@4npm install vuex@next --save npm install ant-design-vue@next --save npm install axios --save npm install nprogress --save npm install less less-loader --save-dev
三、安装格式校验工具。
npm install @typescript-eslint/eslint-plugin -S npm install @typescript-eslint/parser -S npm install eslint -S npm install eslint-config-prettier@7.2.0 -S //这个一定要是7.2.0版本,其他版本配置会报错 npm install eslint-plugin-prettier -S npm install eslint-plugin-vue -S npm install prettier -S npm install pretty-quick -S npm install vue-eslint-parser -S
以上都是代码检查工具,可以通过配置让eslint对ts进行检查和美化,其中配置可自行根据需求更改。
prettier.config.js 的配置,这是prettier插件的配置项
module.exports = { printWidth: 100, tabWidth: 2, useTabs: false, semi: true, vueIndentScriptAndStyle: true, singleQuote: true, quoteProps: 'as-needed', bracketSpacing: true, trailingComma: 'es5', jsxBracketSameLine: false, jsxSingleQuote: false, arrowParens: 'always', insertPragma: false, requirePragma: false, proseWrap: 'never', htmlWhitespaceSensitivity: 'strict', endOfLine: 'lf', rangeStart: 0,};
.eslintrc.js的配置项,导入了prettier.config.js的配置
module.exports = { parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', ecmaVersion: 2020, sourceType: 'module', ecmaFeatures: { jsx: true, }, }, extends: [ 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint', 'plugin:prettier/recommended', ], rules: { '@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-var-requires': 'off', '@typescript-eslint/no-empty-function': 'off', 'vue/custom-event-name-casing': 'off', 'no-use-before-define': 'off', '@typescript-eslint/no-use-before-define': 'off', '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/ban-types': 'off', '@typescript-eslint/no-non-null-assertion': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-unused-vars': [ 'error', { argsIgnorePattern: '^h$', varsIgnorePattern: '^h$', }, ], 'no-unused-vars': [ 'error', { argsIgnorePattern: '^h$', varsIgnorePattern: '^h$', }, ], 'space-before-function-paren': 'off', 'vue/attributes-order': 'off', 'vue/one-component-per-file': 'off', 'vue/html-closing-bracket-newline': 'off', 'vue/max-attributes-per-line': 'off', 'vue/multiline-html-element-content-newline': 'off', 'vue/singleline-html-element-content-newline': 'off', 'vue/attribute-hyphenation': 'off', // 'vue/html-self-closing': 'off', 'vue/require-default-prop': 'off', 'vue/html-self-closing': [ 'error', { html: { void: 'always', normal: 'never', component: 'always', }, svg: 'always', math: 'always', }, ], },};
具体配置可以查看我的github:github.com/TimmyYagami…
四、项目结构个人推荐
image
总结:以上就是一个超简单的vite2使用方法啦,我只是一个在内卷中苦苦挣扎的大专生——天铭,希望和大家共同努力,只要我们足够努力,我们的老板就能早日过上自己想要的日子!
作者:天铭_Yagami
链接:https://www.jianshu.com/p/155b63046268
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。