从0-1搭建Vue3+Vite3模板工程（2）-安装依赖

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天点击查看活动详情

从0-1搭建Vue3+Vite3模板工程（1）

接上篇。

一、eslint、css 预处理器sass安装

1. /tsconfig.json配置文件可以配置使用'@'符号引入

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true, // 解决打包报`vue-tsc --noEmit && vite build`的错,忽略所有的声明文件(*.d.ts)的类型检查
    "baseUrl": ".",
    "paths": {
      "@/*":[
        "src/*"
      ]
    }

  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  // ts 排除的文件
  "exclude": ["node_modules"],
  "suppressImplicitAnyIndexErrors":true, // 
}

想了解这些配置含义可以参考这篇文章， # tsconfig.json常见配置

2. eslint安装

npm install --save-dev eslint eslint-plugin-vue

eslint配置文件： 在src文件夹下建立.eslintrc.ts文件，配置如下：

module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'module'
  },
  parser: 'vue-eslint-parser',
  extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-stronglyrecommended', 'plugin:vue/vue3-recommended'],
  env: {
    browser: true,
    node: true,
    es6: true
  },
  rules: {
    'no-console': 'off',
    'comma-dangle': [2, 'never'] //禁止使用拖尾逗号
  }
}

TODO： 整理一下eslint配置含义 3. 安装css预处理器

npm install -D sass sass-loader

二、在项目中引入element plus UI组件库

可参考官网： element-plus.gitee.io/zh-CN/guide…

根据自己的需要，如果不在乎打包后大小可以完整导入，也可以按需引入。

本篇文章就完整引入了。

npm install element-plus --save

在main.ts中加入下面两句：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

然后我们验证一下element plus是否安装成功。

修改HelloWorld.vue文件：

<template>
  <p>{{ showcount }}</p>
  <el-button @click="addBtn">增加</el-button>
</template>
<script setup lang="ts">
import { ref, computed } from "vue"
import { useStore } from "@/store/index"
const store = useStore()
const count = ref(0)
const showcount = computed(() => {
  return store.getters["getCount"]
})
const addBtn = () => {
  store.commit("setCount", ++count.value)
}
</script>
<style scoped></style>

注意，我们通过“@”符号引入文件可能会报错：

Failed to resolve import "@/store/index" from "src\components\HelloWorld.vue". Does the file exist?

解决办法，安装@types/node：

npm i --save-dev @types/node

然后修改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:[
      {
        find: '@',
        replacement: resolve(__dirname, 'src')
      }
    ],
  },
  
})

然后浏览器中就可以看到下面的图，说明element plus引入成功了：

下面讲解如何布局。