Vite创建项目Vue3 + TS必备的依赖和环境

@Vite创建项目Vue3 TS必备的依赖和环境

开始

用 vite 创建的 vue3 ts 项目后，在 vscode 中打开，可以看到缺少很多 vue 开发必备依赖库与插件。

1. 创建项目

可以移步到vite官网 Vite中文网
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

$ npm init vite@latest

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite Vue 项目，运行:

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7 , 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

2. 配置vue-router

官网：vue-router
执行：npm install vue-router@4
在 src路径下，创建文件夹和TS文件src/router/index.ts，并添加如下内容

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    }
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

修改 main.ts和 App.vue文件内容如下：
main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import router from './router'

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

App.vue

<script setup lang="ts">
</script>

<template>
  <img alt="Vue logo" src="https://blog.csdn.net/xi_jun/article/details/assets/logo.png" />
  <router-view msg="Hello Vue 3   TypeScript   Vite" />
</template>

3. 安装 Pinia 存储

官网：Pinia
执行：npm install pinia
在 src路径下，创建文件夹和TS文件src/store/index.ts，并添加如下内容

import { defineStore } from 'pinia'
export const useIndexStore = defineStore('index', {
  // 相当于vue的data
  state: () => {
    return {}
  },

  // 相当于vue的compute，在getters中使用了this则必须手动指定返回值类型，否则类型推导不出来
  getters: {},

  // 相当于vue的method，在actions中不能使用箭头函数，因为箭头函数绑定外部this
  actions: {}
})

修改 main.ts文件内容如下：
main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import router from './router'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)

app.use(pinia).mount('#app')

4. 安装Sass

官网：Sass
执行：添加sass依赖

npm install sass -D
npm install sass-loader -D
npm install sass-node -D

对 App.vue文件进行修改，运行查看效果。

App.vue

<script setup lang="ts">
</script>

<template>
  <img alt="Vue logo" src="https://blog.csdn.net/xi_jun/article/details/assets/logo.png" />
  <router-view msg="Hello Vue 3   TypeScript   Vite" />
  <div class="preprocessor">安装了SASS的测试</div>
</template>
<style lang="scss" scoped>
.preprocessor {
  width: 300px;
  height: 100px;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: rgb(180, 180, 180);
  text-align: center;
  color: #fff;
  padding: 10px;
}
</style>

5. 安装axios

官网：axios
执行：npm install axios
在 src路径下，创建api文件夹，新建index.ts和http.ts文件，并添加内容。
修改 main.ts和 App.vue文件内容如下
http.ts

import axios from 'axios'
const baseUrl = 'http://localhost:3000';
export const http = axios.create({
  baseURL: baseUrl,
  timeout: 60000,
  headers: {
    accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

// 请求拦截
http.interceptors.request.use(
 (request) => {
    console.log('发送请', request)
    return request
  },
  (error) {
    console.log('发送请求错误', error.message)
    return Promise.reject(error)
  }
)

// 返回拦截
http.interceptors.response.use(
	 (response) => {
    console.log('响应：', response)
    return response
  },
	(error) => {
    console.log('响应-错误：', error.response)
    return Promise.reject(error)
  }
)

index.ts

import { http } from './http'
import { ref } from 'vue'

export const dataLoading = ref(true)
export const getData = async () => {
  const errorMsg = ref('')
  const result = ref([])
  dataLoading.value = true
  await http
    .get('/xxxxx/getData') // 接口地址
    .then((res) => {
      dataLoading.value = false
      result.value = res.data
      errorMsg.value = ''
    })
    .catch((err) => {
      dataLoading.value = false
      result.value = []
      errorMsg.value = err.message
    })
  return {
    result,
    errorMsg
  }
}

6. 安装 fontawesome 图标库

官网：fontawesome
使用详解：使用详解
执行下面获取fontawesome免费图标库

npm i --save @fortawesome/vue-fontawesome@prerelease
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

在 src路径下，创建plugins文件夹，新建fontawesome.ts文件，并添加内容。

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { App } from 'vue'

library.add(fas)
library.add(far)
library.add(fab)

export default (app: App<Element>) => {
  app.component('font-awesome-icon', FontAwesomeIcon)
}

修改 main.ts和 App.vue文件内容如下：

main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
// 导入路由
import router from '@/router'
//  引入pinia存储库
import { createPinia } from 'pinia'
import installFontawesome from '@/plugins/fontawesome'

const pinia = createPinia()
const app = createApp(App)

installFontawesome(app)
app.use(router).use(pinia).mount('#app')

App.vue

<script setup lang="ts">
</script>

<template>
  <img alt="Vue logo" src="https://blog.csdn.net/xi_jun/article/details/assets/logo.png" />
  <router-view msg="Hello Vue 3   TypeScript   Vite" />
  <div class="preprocessor">安装了SASS的测试</div>
  <div class="font_box">
    <font-awesome-icon icon="chess-knight" size="lg" />
    <font-awesome-icon icon="chess-knight" size="2x" />
    <font-awesome-icon icon="bag-shopping" />
  </div>
</template>

<style lang="scss" scoped>
.preprocessor {
  width: 300px;
  height: 100px;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: rgb(180, 180, 180);
  text-align: center;
  color: #fff;
  padding: 10px;
}
</style>

7. 安装 ElementPlus UI框架

官网：ElementPlus
执行下面语句安装element-plus组件与图标

npm install element-plus --save
npm install @element-plus/icons-vue

在 src路径下，创建plugins文件夹，新建elementpuls.ts文件，并添加内容。
elementpuls.ts

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/src/index.scss'
import locale from 'element-plus/es/locale/lang/zh-cn'
import * as ElIconModules from '@element-plus/icons-vue'
import { App } from 'vue'

export default (app: App<Element>) => {
  app.use(ElementPlus, { locale })
  for (const iconName in ElIconModules) {
    app.component(
      iconName,
      ElIconModules[iconName as keyof typeof ElIconModules]
    )
  }
}

修改 main.ts和 App.vue文件内容如下：

main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
// 导入路由
import router from '@/router'
//  引入pinia存储库
import { createPinia } from 'pinia'
import installFontawesome from '@/plugins/fontawesome'
import installElementPuls from '@/plugins/elementpuls'

const pinia = createPinia()
const app = createApp(App)

installFontawesome(app)
installElementPuls(app)
app.use(router).use(pinia).mount('#app')

App.vue

<script setup lang="ts">
</script>

<template>
  <img alt="Vue logo" src="https://blog.csdn.net/xi_jun/article/details/assets/logo.png" />
  <router-view msg="Hello Vue 3   TypeScript   Vite" />
  <div class="preprocessor">安装了SASS的测试</div>
  <div class="font_box">
    <font-awesome-icon icon="chess-knight" size="lg" />
    <font-awesome-icon icon="chess-knight" size="2x" />
    <font-awesome-icon icon="bag-shopping" />
  </div>
  <el-button type="success">Success</el-button>
</template>

<style lang="scss" scoped>
.preprocessor {
  width: 300px;
  height: 100px;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: rgb(180, 180, 180);
  text-align: center;
  color: #fff;
  padding: 10px;
}
</style>

8. process未定义的问题

vue-cli 建立的 vue3 项目，通过 process.env 获取开发环境的变量配置
vite 建立的 vue3 项目中，直接使用 process.env 产生未定义错误

vite建立的项目中使用process.env
执行：npm i --save-dev @types/node,然后在vite.config.ts文件添加define内容

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': process.env
    //'process.env': { // 手动添加process.env 
    //  'NODE_ENV':'development'
    //},
  },
})

9. @找不到模块

vite 建立的 vue3 项目，导入模块时，使用 @/…/… 绝对路径找不到模块

在tsconfig.json文件的 "compilerOptions"中填加下面内容

{
  "compilerOptions": {
    ......
    "allowSyntheticDefaultImports": true, 
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  ......
}

然后，先在tsconfig.node.json文件的"compilerOptions"中填加 "allowSyntheticDefaultImports" : true,项，

vite.config.ts

....
import path from 'path' // 不按照上述修改 tsconfig.node.json 文件会报错

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  ....
})

这篇好文章是转载于：学新通技术网