# vite-typscript-vue3 环境搭建

# 环境准备

WARNING

Node.js版本 >= 12
建议使用nvm对node版本进行控制

# 查看node版本
node -v

# 使用vite快速搭建

🍚搭建第一个 Vite 项目🎀 (opens new window)

# 方式1

npm create vite@latest
# ---按需要选择---

# 方式2

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts

# 安装依赖🥠启动

# cd 项目文件夹
npm install
npm run dev

提示

如果想要打印出 IP + port ，use --host

// package.json
"scripts": {
    "dev": "vite --host",
    // ...
},

# vite配置文件

// 根目录 vite.config.ts 文件 。项目的全局配置文件，启动时会自动读取该文件。

//  简单示例  别名 | 服务端口 | 打包路径 | 代理。。。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  base: './', // 打包路径
  server: {
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  }
})

# 集成路由

# 安装支持vue3的路由

npm i vue-router@4

# 创建 src/router/index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '@/views/home.vue')
  },
  { path: '/', redirect: { name: 'Home' } }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

# 挂载路由

// main.ts 文件
import { createApp } from 'vue'
import App from '@/App.vue'

import router from '@/router/index'

createApp(App).use(router).mount('#app')

# 集成Vuex

安装支持Vue3的状态管理工具 vuex@next

npm i vuex@next

创建 src/store/index.ts文件

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// 新建store实例
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count += 1
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state: typeof defaultState) {
      return 2 * state.count
    }
  }
})

3、main.ts文件挂载

import { createApp } from 'vue'
import App from '@/App.vue'

import router from '@/router/index'
import store from '@/store/index'

createApp(App).use(router).use(store).mount('#app')

# 集成Axios

# 安装

npm i axios

# 配置使用

配置 Axios 根据常规规范，axios封装的方法放在 src/utils/http.ts
使用 Axios 在需要使用的地方引入http.ts文件

# 集成CSS预编译器Sass

npm i sass -D

# 使用 <style lang="scss"></style>

# 代码规范

# 集成EditorConfig

🍎什么是EditorConfig？🌸

EditorConfig是一种文件格式，也是一组用于各种文本编辑器的插件。它用于定义和维护不同编辑器和团队之间的一致的编码样式和文件格式约定。这有助于确保项目中的每个人都使用相同的编码标准，这有助于提高代码的整体质量和可维护性。

# 如何使用

要使用EditorConfig，首先需要在项目根目录中创建一个名为.editorconfig的文件。该文件包含了项目中使用的编码样式和文件格式约定的配置信息。然后，安装EditorConfig插件，并在文本编辑器中启用它。编辑器将会根据.editorconfig文件中的配置信息自动调整编码样式和文件格式。

比如，如果.editorconfig文件中设置了文件结尾的换行符必须为LF，则编辑器会在保存文件时自动将CRLF转换为LF。

下面是一个简单的.editorconfig文件示例：

# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 EditorConfig 配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置所有文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

# 如下单独配置文件类型规则
# [*.js] # js使用以下规则
# indent_style = space
# indent_size = 2

# 安装EditorConfig插件

VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig VS Code
JetBrains 系列（WebStorm、IntelliJ IDEA）则不用额外安装插件，可直接使用 EditorConfig 配置。

# 集成Prettier

Prettier是什么？

Prettier是一个用于格式化代码的工具，它可以帮助你维护代码风格的一致性。Prettier可以自动格式化你的代码，使其符合指定的代码风格，而无需手动调整。Prettier支持多种编程语言，包括JavaScript、Typescript、Css、Scss、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown等。 Prettier官网 (opens new window)

# 安装Prettier

npm i prettier -D

# 创建 Prettier 配置文件

在根目录下创建 .prettierrc 文件

# 配置 .prettierrc

🎢详细配置查看官网🍜

// @see: https://www.prettier.cn

module.exports = {
	// 超过最大值换行
	printWidth: 130,
	// 缩进字节数
	tabWidth: 2,
	// 使用制表符而不是空格缩进行
	useTabs: true,
	// 结尾不用分号(true有，false没有)
	semi: true,
	// 使用单引号(true单双引号，false双引号)
	singleQuote: false,
	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
	quoteProps: "as-needed",
	// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
	bracketSpacing: true,
	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
	trailingComma: "none",
	// 在JSX中使用单引号而不是双引号
	jsxSingleQuote: false,
	//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
	arrowParens: "avoid",
	// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
	insertPragma: false,
	// 指定要使用的解析器，不需要写文件开头的 @prettier
	requirePragma: false,
	// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
	proseWrap: "preserve",
	// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
	htmlWhitespaceSensitivity: "css",
	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
	endOfLine: "auto",
	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
	rangeStart: 0,
	rangeEnd: Infinity,
	// Vue文件脚本和样式标签缩进
	vueIndentScriptAndStyle: false
};

# 被Prettier忽略

根目录新建 .prettierignore 文件

TIP

用于指定哪些文件或文件夹应该被Prettier忽略。这对于排除那些不需要格式化的文件或文件夹非常有用，比如第三方库文件或自动生成的文件。

/dist/*
.local
/node_modules/**

**/*.svg
**/*.sh

/public/*

# 可以使用命令格式化

npx prettier --write . # .表示所有文件

# 配合编辑器插件

VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter
JetBrains 系列（WebStorm、IntelliJ IDEA）则不用额外安装插件，可直接使用 EditorConfig 配置。

# 总结

Prettier 配置好以后，在使用 VSCode 或 WebStorm 等编辑器的格式化功能时，编辑器就会按照 Prettier 配置文件的规则来进行格式化，避免了因为大家编辑器配置不一样而导致格式化后的代码风格不统一的问题。

← vue3生命周期