vite+vue项目搭建 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

1.创建vite+vue3项目

首先通过vite来创建一个vue3项目，直接下载vue的模板，这里使用npm，需要版本7+

npm init vite@latest byte -- --template vue

接下来进入目录安装依赖在浏览器打开出现下面页面即成功

2.配置Eslint和prettier

由于由vite默认模板生成的项目没有配置Eslint和prettier，这里我们自己配置，eslint为我们提供了代码规范，prettier帮助我们更好的格式化代码。

npm i -D eslint eslint-plugin-vue eslint-define-config 
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier # prettire

接下来在根目录创建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {
  },
}

创建.prettierrc.js文件

module.exports = {
  tabWidth: 2,
  semi: false,
  printWidth: 80,
  singleQuote: true,
  quoteProps: "consistent",
  htmlWhitespaceSensitivity: "strict",
  vueIndentScriptAndStyle: true,
};

package.json 配置

 "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
 "prettier": "prettier --write ."

这样我们在命令行输入命令时就可以自动检查并且修复，但这样还是太过于麻烦，我们在vscode编辑器打开setting.json输入以下代码，这样保存时就会自动检查.

 "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.validate.enable": false

3.配置别名

配置别名可以帮助我们快速的找到我们想要的组件、图片等内容，不用使用../../../的方式，首先配置vite.config.js，通过resolve.alias的方式配置，示例代码如下：

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      // eslint-disable-next-line no-undef
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.json', '.vue'],
  },
})

这样我们就可以使用@直接指向src目录了

4.安装Unocss

什么是Unocss？

unocss是一个原子化的引擎，相信用过tailwind css都知道原子化css是啥，没错这个东西它支持tailwind的所有功能以及有着它自己的强大优点，具体可以看antfu的这篇文章

安装、

下载

npm i -D unocss

vite.config.js引入

import Unocss from 'unocss/vite'
export default {
  plugins: [
    Unocss({ /* options */ }),
  ],
}

main.js

import 'uno.css'

使用

我们可以直接在class里面加类名来设置我们的样式，效果如下

<div class="w-100 h-100 bg-red">demo</div>

更多的用法可以去官网查看

5.安装arco.design

arco.design既可以说是一个vue3组件库，也可以说它是一套设计体系，综合考虑下我们选择了这个组件库来帮助我们开发

安装

npm install --save-dev @arco-design/web-vue

完整引入

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

总结

项目搭建是一个很繁琐的过程，但是只有选择好了自己的工具，适合开发所用的技术才能让我们在开发中更加的顺利。