项目搭建之vite脚手架1. 初始化项目 2. 给 vscode 安装 eslint prettier stylelin

Vite是一个为Web开发人员构建工具，可在开发期间通过本机ES模块导入为您的代码提供服务，并将其与Rollup捆绑在一起进行生产

快速启动冷服务器
即时热模块更换（HMR）
真正的按需编译

1. 初始化项目

Vue用户注意：Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库。

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
# or
yarn create vite-app <project-name>
cd <project-name>
yarn install
yarn dev

2. 给 vscode 安装 eslint prettier stylelint 插件

插件使用说明请插件到 vscode 工具‘插件’中搜索查看详情

注：
1. 每个CLI插件都附带一个生成器（用于创建文件）和一个运行时插件（用于调整核心webpack配置并注入命令）。
2. 当您使用 vue create 创建新项目时，将根据您选择的功能为您预安装一些插件。
3. 如果要将插件安装到已创建的项目中，可以使用 vue add 命令执行此操作
4. vue add是专门为安装和调用Vue CLI插件而设计的。它并不意味着替代普通的npm软件包。
对于普通的npm软件包，您仍应使用所选的软件包管理器。

3. 使用 eslint + babel

eslint 官方文档：eslint.org/docs/user-g…

在现有项目中安装 eslint 插件, 并在 package.json 中添加 npm 包信息

vue add eslint
vue add babel

初始化并生成.eslintrc.js

eslint --init

4. 使用 GUI

通过 vue ui 命令使用图形界面来创建和管理项目

vue ui

5. 使用 scss

Vue CLI 项目附带对 PostCSS，CSS 模块和预处理器（包括 Sass，Less 和 Stylus）的支持。创建项目时，可以选择预处理器（Sass / Less / Stylus）。如果您没有这样做，则内部 webpack 配置仍会预先配置为处理所有这些。您只需要手动安装相应的 webpack 加载器：

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus
# 或者使用全局安装

使用例子:

<style lang="scss">
$color: red;
</style>

或者直接使用.scss 文件

6. 配置 prettier 插件(.vscode/setting.json)

prettier 官方文档：prettier.io/docs/en/con…

在项目中安装：

npm install prettier -D

激活 formatOnSave 功能： control + shift + p 打开命令输入框，选择首选项 setting.json, 添加如下代码

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.fixAll.stylelint": true
  }

自定义 prettier:

A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
A .prettierrc.toml file.

JSON:

{
	"trailingComma": "es5",
	"tabWidth": 4,
	"semi": false,
	"singleQuote": true
}

JS:

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

YAML:

# .prettierrc or .prettierrc.yaml
trailingComma: 'es5'
tabWidth: 4
semi: false
singleQuote: true

7. 配置 stylelint(.vscode/setting.json)

stylelint 官方文档：stylelint.io/user-guide/…

在项目中安装：

npm install stylelint -D
npm install stylelint-config-prettier -D #建议配套安装
npm install stylelint-prettier -D   #建议配套安装

在.vscode/setting.json 中添加如下配置：

"stylelint.enable": true    // 启用stylelint

一旦用户通过创建.stylelintrc.json 配置文件或编辑 stylelint.* VSCode 设置来遵循 stylelint 启动指南，stylelint 就会自动使用语言标识符来验证文档.

自定义 stylelint:

.stylelintrc
.stylelintrc.json
.stylelintrc.yaml / .stylelintrc.yml
.stylelintrc.js

8. 创建 vite.config.js 文件

您可以在项目中创建 vite.config.js 或 vite.config.ts 文件。如果在当前工作目录中找到 Vite，它将自动使用它。您还可以通过vite --config my-config.js显式指定配置文件。

9. typescript

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。此时就可以把.js=>.ts，.jsx=>.tsx。可以适用ts语法了。

初始化并生成tsconfig.json文件

tsc --init

tsconfig.json介绍地址：

英文文档：www.typescriptlang.org/docs/handbo…

中文文档：www.tslang.cn/docs/handbo…

10. vue-router

官方文档：router.vuejs.org/installatio…

#npm install vue-router #目前默认安装的版本是3.*.*, 适用vue2
yarn add vue-router@4.0.0-0  # 适用于vue3版本

与模块系统一起使用时，必须通过.use()以下方式显式安装路由器：

main.js

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

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

使用例子：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

使用全局脚本标记时，您不需要这样做。

11. vuex

官当文档：vuex.vuejs.org/zh/

Vuex是Vue.js应用程序的状态管理模式+库

npm:

npm install vuex --save

# If using Vue 3.0 + Vuex 4.0:
npm install vuex@next --save

yarn:

yarn add vuex

# If using Vue 3.0 + Vuex 4.0:
yarn add vuex@next --save

Vue 2中使用【Vuex 3.x (for Vue 2)】

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Vue 3中使用【Vuex 4.x (for Vue 3)】

import { createApp } from 'vue'
import { createStore } from 'vuex'

const app = createApp({ ... })
const store = createStore({ ... })

app.use(store)

Vuex使用promise。如果支持的浏览器未实现Promise（例如IE），则可以使用polyfill库，例如es6-promise。

可以通过CDN包含它：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

然后window.Promise将自动可用。

如果您更喜欢使用NPM或Yarn之类的程序包管理器，请使用以下命令进行安装：

npm install es6-promise --save # NPM
yarn add es6-promise # Yarn

此外，在使用Vuex之前，将以下行添加到代码中的任何位置：

import 'es6-promise/auto'

12. 编译代码

  yarn dev
  yarn build

到这里就可以开始进行项目功能开发了！

暂时总结的就些，后续会进行优化修改补充，欢迎留下你宝贵的建议！在搭建过程遇到的问题也欢迎留言一起研究！