Vite 开发快速入门
import router from ‘./router’;
createApp(App).use(router).mount(“#app”);
2.2.2 新增路由页面
为了方便掩饰，我们再新增两个路由页面。熟悉，创建pages文件夹，把需要展示的页面创建完成。然后，我们在router/index.ts注册我们新增的页面，如下所示。
routes: [
{
path: “/home”,
name: “Home”,
alias: “/”,
component: () => import(“…/pages/Home.vue”)
},
]
接下来，我们再修改一下App.vue的代码，如下所示。
Home
About
接下来启动服务，就可以看到所配置的页面了，并且点击还能够跳转到对应的页面。
2.3 集成Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
使用Vuex之前，需要先安装Vuex插件，如下所示。
//npm
npm install vuex@next --save
//yarn
yarn add vuex@next --save
安装完成之后，需要先初始化Vuex。首先，创建一个store/index.ts文件，添加如下代码。
import { createStore } from “vuex”;
const store = createStore({
modules: {
home: {
namespaced: true,
state: {
count: 1
},
mutations: {
add(state){
state.count++;
}
}
}
}
})
export default store;
上面的代码作用就是实现一个简单的自加功能。然后，我们在main.js文件中引入Vuex。
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
import store from “./store”;
const app = createApp(App);
app.use(store);
app.mount(‘#app’);
完成上述操作之后，接下来我们给Vuex编写一个测试代码看Vuex是否有效。修改Home.vue的代码如下。
Home Page
{{count}}
<button @click=“handleClick”>click
上面的代码实现的就是一个简单的自加功能，和默认示例工程的效果事一样的，只不过我们使用Vuex。
2.4 集成Eslint
ESLint是一个用来识别 ECMAScript语法， 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。集成Eslint需要安装如下一些插件：
npm方式
npm install eslint -D
npm install eslint-plugin-vue -D
npm install @vue/eslint-config-typescript -D
npm install @typescript-eslint/parser -D
npm install @typescript-eslint/eslint-plugin -D
npm install typescript -D
npm install prettier -D
npm install eslint-plugin-prettier -D
npm install @vue/eslint-config-prettier -D
yarn方式
yarn add eslint --dev
yarn add eslint-plugin-vue --dev
yarn add @vue/eslint-config-typescript --dev
yarn add @typescript-eslint/parser --dev
yarn add @typescript-eslint/eslint-plugin --dev
yarn add typescript --dev
yarn add prettier --dev
yarn add eslint-plugin-prettier --dev
yarn add @vue/eslint-config-prettier --dev
安装完成之后，还需要根目录下创建一个.eslintrc文件，如下。
{
“root”: true,
“env”: {
“browser”: true,
“node”: true,
“es2021”: true
},
“extends”: [
“plugin:vue/vue3-recommended”,
“eslint:recommended”,
“@vue/typescript/recommended”
],
“parserOptions”: {
“ecmaVersion”: 2021
}
}
添加了配置规则之后，还需要在package.json文件的scripts中添加如下命令：
{
“lint”: “eslint --ext src/**/*.{ts,vue} --no-error-on-unmatched-pattern”
}
接下来运行一下yarn lint就可以了，可以通过eslint完成格式的校验了。不过，我们在执行yarn lint的时候会把所有的文件全部都校验一次，如果有很多文件的话，那么校验起来速度将会很慢，此时，我们一般只在git提交的时候才对修改的文件进行eslint校验，那么我们可以这么做。
那就需要使用 lint-staged插件。
//npm
npm install lint-staged -D
//yarn
yarn add lint-staged --dev
然后，我们对package.json进行修改：
{
“gitHooks”: {
“commit-msg”: “node scripts/commitMessage.js”,
“pre-commit”: “lint-staged”
},
“lint-staged”: {
“*.{ts,vue}”: “eslint --fix”
},
“scripts”: {
“test:unit”: “jest”,
“test:e2e”: “cypress open”,
“test”: “yarn test:unit && npx cypress run”,
“lint”: “npx prettier -w -u . && eslint --ext .ts,.vue src/** --no-error-on-unmatched-pattern”,
“bea”: “npx prettier -w -u .”
},
}
2.5 配置alias
在过去使用vue-cli的时候，我们总是使用@去引入某些文件，由于Vite没有提供类似的配置，所以我们需要手动的对其进行相关配置，才能继续使用@符号去快捷的引入文件。首先，我们需要修改vite.config.ts的配置。
import { defineConfig } from ‘vite’;
import vue from ‘@vitejs/plugin-vue’;
import { join } from “path”;
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: ‘@’,
replacement: ‘/src’,
},
{ find: ‘views’, replacement: ‘/src/views’ },
{ find: ‘components’, replacement: ‘/src/components’ },
]
}
});
然后，我们在修改tsconfig.json文件，如下。
{
“compilerOptions”: {
“target”: “esnext”,
“module”: “esnext”,
“moduleResolution”: “node”,
“strict”: true,
“jsx”: “preserve”,
“sourceMap”: true,
“resolveJsonModule”: true,
“esModuleInterop”: true,
“lib”: [“esnext”, “dom”],
//以下为需要添加内容
“types”: [“vite/client”, “jest”],
“baseUrl”: “.”,
“paths”: {
“@/": ["src/”]
}
},
“include”: [
“src/**/*.ts”,
“src/**/*.d.ts”,
“src/**/*.tsx”,
“src/**/*.vue”,
]
}
2.6 集成element-plus
Element Plus是由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，可以帮助开发者快速的开发网站，如果你使用过element-ui，那么可以快速的过渡到element-plus。除了element-plus，支持Vue 3.0 的UI框架还有很多。
首先，在项目的根目录下安装element-plus，命令如下：
npm install element-plus --save
2.6.1 引入element-plus
我们可以引入整个 element-plus，也可以根据需要仅引入部分组件。如果是全部引入，只需要在main.js 添加如下代码即可。
import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’;
i
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app’)
如果为了减小项目的包体积，那么只需要引入对应的功能组件即可。首先，安装 babel-plugin-component插件，如下所示。
npm install babel-plugin-component --save
然后，修改.babelrc的配置内容。
{
“plugins”: [
[
“component”,
{
“libraryName”: “element-plus”,
“styleLibraryName”: “theme-chalk”
}
]
]
}
如果我们只需要引入部分组件，比如 Button 和 Select组件，那么需要在 main.js 中引入对应的组件即可，如下所示。
import { createApp } from ‘vue’
import { store, key } from ‘./store’;
import router from “./router”;
import { ElButton, ElSelect } from ‘element-plus’;
import App from ‘./App.vue’;
import ‘./index.css’
const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
/* 或者
* app.use(ElButton)
* app.use(ElSelect)
*/
app.use(store, key)
app.use(router)
app.mount(‘#app’)
2.6.2 添加配置
引入 Element Plus后，我们可以添加一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index。以下是两种不同的引入方式：
全局引入：
import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’;
import App from ‘./App.vue’;
const app = createApp(App)
app.use(ElementPlus, { size: ‘small’, zIndex: 3000 });
按需引入：
import { createApp } from ‘vue’
import { ElButton } from ‘element-plus’;
import App from ‘./App.vue’;
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);
2.6.3 配置proxy 和 alias
如果要在Vite中使用alias别名配置和proxy代理配置，那么需要在vite.config.ts文件中进行单独的配置。
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import styleImport from ‘vite-plugin-style-import’
import path from ‘path’
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: ‘element-plus’,
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
return element-plus/lib/theme-chalk/${name}.css;
},
resolveComponent: (name) => {
return element-plus/lib/${name};
},
}
]
})
],
/**
* 在生产中服务时的基本公共路径。
* @default ‘/’
*/
base: ‘./’,
/**
* 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
* @default ‘dist’
*/
// outDir: ‘dist’,
server: {
// hostname: ‘0.0.0.0’,
host: “localhost”,
port: 3001,
// // 是否自动在浏览器打开
// open: true,
// // 是否开启 https
// https: false,
// // 服务端渲染
// ssr: false,
proxy: {
‘/api’: {
target: ‘http://localhost:3333/’,
changeOrigin: true,
ws: true,
rewrite: (pathStr) => pathStr.replace(‘/api’, ‘’)
},
},
},
resolve: {
// 导入文件夹别名
后话
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。