vue3+ts+vite创建新项目完整流程

安装vue-router,less/sass、axios、配置eslint、安装第三方组件库vant/element

文章目录

• 1、创建vue3的项目
• 2、安装vue-router
• 3、安装less/sass
• 4、安装axios
• 5、安装eslint
• 6、配置eslint

---

---

1、创建vue3的项目

1、使用终端创建vite项目

yarn create vite

2、新项目名字

? Project name: » vite-project

3、选择vue，选择TypeScript、进入新项目下载依赖并启动

 Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

//选择TypeScript

 Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗

//进入 新创建的项目、安装node依赖包并运行新项目
Done. Now run:

  cd directive
  yarn
  yarn dev

// 这样我们的新项目就跑起来了

 VITE v4.4.11  ready in 2226 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

 2、安装vue-router

yarn add vue-router

 在src下创建一个router文件夹，再创建个index.ts文件，作为我们项目的路由文件

import { createRouter, createWebHistory } from 'vue-router'
let routes = [
    {
        path: "/",
        name: "Home",
        component: () => import('../view/HomeView.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

 但是首先我们需要在src目录下创建一个view文件夹，用来存放我们的页面文件，

 

 顺带也可以将app.vue里无用的代码清理一下

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

在main.ts文件引入并且挂载到vue实例上

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

// createApp(App).mount('#app')
const app =createApp(App)
app.use(router)
app.mount('#app')

这样路由就配置好了

<template>
    <div>
        vue3+ts+vite
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

3、安装less/sass

安装css预处理器

由于是使用vite,vite它提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;less和sass二选一都可

yarn add sass 
er

yarn add less

安装后就可以使用了

 

<style scoped lang="sass"></style>

4、安装eslint

yarn add eslint

初始化 eslint

npx eslint --init

选择配置

PS D:\桌面\directive> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.6
Ok to proceed? (y) y

选择严格模式

√ How would you like to use ESLint? · style

使用什么模块

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

选择框架

? Which framework does your project use? ...
> React
  Vue.js
  None of these

是否使用ts

? Does your project use TypeScript? » No / Yes

运行在什么环境（浏览器或者node）

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

选择样式风格

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style

eslint文件格式

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

是否立即安装

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now? » No / Yes

安装自动检测

 yarn add vite-plugin-eslint -D

在.eslintrc.json里配置eslint

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:vue/vue3-recommended", "standard"],
  "overrides": [],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "ecmaFeatures": {
      "modules": true
    },
    "parser": "@typescript-eslint/parser",
    "sourceType": "module",
    "requireConfigFile": false
  },
  "plugins": ["vue"],
  "rules": {
    "semi": [2, "never"]
  }
}

在config.ts中使用

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  eslintPlugin({
    include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.vue', 'src/*.js', 'src/*.ts', 'src/*.vue']
  })],
})

---

总结

这就是使用vite创建vue3+ts的全部流程了，哪里有不足欢迎大家指导