Vue3+Vite+TS后台项目 ~ 3. 环境配置_ts后端项目_后海 0_o的博客

相关文章推荐
完美的充值卡 · <algorithm> 函式 | ...· 1 周前 ·
阳刚的蚂蚁 · 在 JavaScript 中使用动态配置 ...· 1 周前 ·
悲伤的熊猫 · React ...· 1 周前 ·
爱旅游的红烧肉 · OpenCV4 ...· 6 天前 ·
淡定的冰淇淋 · SyntaxError: missing ...· 4 天前 ·
爱跑步的鸡蛋 · LocalDateTime计算年龄 - ...· 1 月前 ·
重感情的生姜 · 【WPF】DataTrigger 与 ...· 5 月前 ·
鬼畜的冲锋衣 · Day18-C#-最常用的陣列!處理字串的一 ...· 5 月前 ·
灰常酷的蘑菇 · C# (winforms) ...· 5 月前 ·
强健的吐司 · javascript - Confused ...· 12 月前 ·
在 tsconfig.json 中的 compilerOptions 下设置 "isolatedModules": true 。
"isolatedModules": true,
2. 客户端类型
 
将 vite/client 添加到 tsconfig 中的 compilerOptions.types 下： 
"types": ["vite/client"],
1. Vue 3 支持三种写法：
 
Option API
Composition API
<script setup>（Composition API 的语法糖） 
<!-- 组合式 API 语法糖 script setup -->
<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
// 声明一个数据接收 defineProps
const props = defineProps({
  msg: {
    type: String,
    default: ''
// 自定义事件
const emit = defineEmits(['increment'])
const msg = 'abc'
const count = ref(100)
const increment = () => {
  count.value++
  console.log('msg=>', props.msg)
  // => Hello Vue 3 + TypeScript + Vite
  // => abc (重名后会以本地的赋值为主)
  // 导出自定义事件
  emit('increment')
</script>
2. 编译宏
 
编译器宏，例如defineProps和defineEmits生成no-undef警告；
 您需要在 ESLint 配置文件中启用编译器宏环境。如果您不想全局公开这些变量，则可以/* global defineProps, defineEmits */改用。 
// 引用文件
// import { ref, defineProps, defineEmits } from 'vue'
import { ref } from 'vue'
在 .eslintrc.js 下： 
module.exports = {
  globals: {
    // 'vue/setup-compiler-macros': true
    // 去掉 以下方法未引用时报错
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
三、渲染函数、JSX、TSX
 
1. 渲染函数
 
 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。 
Vue3 渲染函数文档 
2. jsx、tsx
 
// 安装
npm i -D @vitejs/plugin-vue-jsx
配置 vite.config.ts 插件： 
import vueJsx from '@vitejs/plugin-vue-jsx'
  plugins: [
    vueJsx({
      // 配置选项
新建 src / router / index.ts 文件： 
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
    path: '/',
    name: 'home',
    component: () => import('../views/home/index.vue')
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
const router = createRouter({
  history: createWebHashHistory(), // 路由模式
  routes // 路由规则
export default router
2. 路由页面
 
新建 src / views / home / index.vue 文件： 
<template>
  <h1>主页</h1>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>
新建 src / views / login / index.vue 文件： 
<template>
  <h1>登录</h1>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>
3. eslint 报错
 
 Component name “index” should always be multi-word.eslintvue/multi-word-component-names
 组件名称“索引”应始终为多字 vue/多字组件名称 
编辑 .eslintrc.js 文件： 
  rules: {
    // 去掉 单字 组件名称报错
    'vue/multi-word-component-names': ['error', {
      ignores: ['index']
新建 src / store / index.ts 文件： 
import { createStore, Store, useStore as baseUseStore } from 'vuex'
import { InjectionKey } from 'vue'
export interface State {
  count: number
  foo: string
// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol('store')
// 创建一个新的 store 实例
export const store = createStore<State>({
  state () {
    return {
      count: 0,
      foo: 'Hello world'
  mutations: {
    increment (state) {
      state.count++
// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
2. 全局引用
 
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store, key } from './store'
createApp(App)
  .use(router)
  .use(store, key)
  .mount('#app')
3. 组件调用
 
<template>
  <h1>主页</h1>
  <p>{{ $store.state.count }}</p>
  <p>{{ store.state.count }}</p>
</template>
<script lang="ts" setup>
// ts 中使用 store
// import { useStore } from 'vuex'
// const store = useStore()
// console.log(store.state.count)
// import { useStore } from 'vuex'
// import { key } from '../../store'
// const store = useStore(key)
// console.log(store.state.)
import { useStore } from '../../store'
const store = useStore()
console.log(store.state)
</script>
<style lang="scss" scoped></style>
4. ts 支持
 
新建 src / vuex.d.ts 文件： 
/* eslint-disable no-unused-vars */
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
import { State } from './store/index'
declare module '@vue/runtime-core' {
  // 声明自己的 store state
  // interface State {
  //   count: number
  // 为 `this.$store` 提供类型声明
  interface ComponentCustomProperties {
    $store: Store<State>
六、配置路径别名
 
1. 基础配置
 
// 在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块
npm i -D @types/node
编辑 vite.config.ts 文件： 
import path from 'path'
export default defineConfig({
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
2. 绝对路径
 
编辑 tsconfig.json 文件： 
  "compilerOptions": {
	// 绝对路径
    "paths": { "@/*": [ "src/*" ]}
3. 示例
 
编辑 src / views / home / index.vue 文件： 
<template>
  <h1>主页</h1>
  <img src="@/assets/logo.png">
  <div class="box" />
</template>
<script lang="ts" setup>
import User from '@/api/user'
console.log(User)
</script>
<style lang="scss" scoped>
.box {
  width: 200px;
  height: 200px;
  background: url('@/assets/logo.png');
</style>
七、CSS 样式管理
 
1. 基础配置
 
// 安装
# .scss and .sass
npm install -D sass
# .less
npm install -D less
# .styl and .stylus
npm install -D stylus
// mac 
$ gem install sass
// 遇到权限问题
$ sudo gem install sass
// sass
$ npm i sass-loader node-sass -D
// 安装依赖
$ npm install stylus-loader css-loader style-loader --save-dev
2. 样式文件
 
 variables.scss # 全局 Sass 变量
 mixin.scss # 全局 mixin
 common.scss # 全局公共样式
 transition.scss # 全局过渡动画样式
 index.scss # 组织统一导出 
编辑 src / styles / index.scss 文件： 
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './common.scss';
3. 全局引用
 
编辑 main.js 文件： 
// 全局样式
import './styles/index.scss'
                                    简单的管理后台基本上就是数据的增删改查。主要就是 列表 + form 表单。每个页面的逻辑基本上都相同。不同的地方就是每个页面需要调用的具体 API 及参数。
以前 vue2 的时候最简单的做法是写出来一个页面的逻辑，然后直接 copy 到各个页面中，修改 API 及参数即可。高级一点的是利用 mixin 函数，将可复用逻辑抽离，每个页面引入 mixin。
vue3 之后新增了composition API。本文就是利用composition API，将可复用的逻辑抽离到composition API中，并
                                    一个基于 RBAC 设计的通用后台管理系统，支持通过配置文件批量完成特定功能，如搜索、表格数据显示，导入、导出。项目中封装了大量通用组件，如表单、表格、Echarts 图表、头像上传、面包屑、左侧菜单等。
会编译到dist目录,然后扔到服务器里,把package.json也扔进去,然后npm install安装项目的依赖
然后项目同文件夹弄一个app.json文件供pm2进行启动
常用的几个pm2命令:
pm2 delete all 关闭所有实例
pm2 list 显示所有实例
pm2 start app.json 根据app.json启动项目
pm2 logs 查看服务日
Volar 是官方的 VSCode 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。
TIP: Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用...
网上的资料都说 ts 是 js 的类型的超集，遵循最新的ES6规范，它扩展了js的语法。
ts 更像后端面向对象语言，规范类型的定义，可以在便衣阶段发现大部分错误。
3.最新的 Vue 和 React 也可以集成TypeScript。
4.势头凶猛，谷歌在大力地推广 ts，angular2 以上都基于 ts 的语法。
5.ts 是前端未来开发的趋势，很多公司都开始拥抱 ts。
安装&&编译
想着边学习边敲代码，可是浏览器不能运行ts，所以我们得先编译成ts