Vue2+Ts实战项目开发与项目优化（一）项目初始化

已于 2022-03-24 10:44:00 修改
阅读量3.9k 收藏 20
点赞数 5
分类专栏： Vue 文章标签： vue.js vue 前端 elementui typescript
于 2021-11-22 23:40:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45487080/article/details/121465301
版权

1. 使用Vue CLI创建项目

vue create edu-boss-fed

在这里插入图片描述
是否采用class分割的组件语法是否babel和ts结合起来编译js（让babel来转换ES，ts只转换ts类型注解等）不采用history模式（默认hash）在什么格式下触发代码校验（前者是保存，后者是提交的时候）配置信息存放到单独的文件当中是否保存之前选择的配置信息

2. 加入git版本管理

git init
git add .
git commit -a -m "项目初始化"
git remote add orign 地址
git push origin -u master

3. 初始目录结构说明

在这里插入图片描述

4. 调整初始目录结构

默认生成的目录结构不满足我们的开发需求，所以需要做一些自定义改动

这里主要处理下面的内容：

  • 删除初始化的默认文件
  • 新增调整我们需要的目录结构

修改App.vue：

<template>
  <div id="app">
    <h1>App</h1>
    <!-- 根级路由出口 -->
    <router-view />
  </div>
</template>

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

修改router/index.ts：

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
]

const router = new VueRouter({
  routes
})

export default router

删除views/About.vue
删除views/Home.vue
删除components/HelloWorld.vue
新增utils目录
新增styles目录
新增services目录

5. 使用TS开发Vue

环境说明

在Vue项目中启用TypeScript支持
（1）全新项目：使用Vue CLI脚手架工具创建Vue项目
（2）已有项目：添加Vue官方配置的TypeScript适配插件

vue add @vue/typescript

相关配置

（1）安装了TypeScript相关的依赖项
dependencies依赖：

依赖项说明
vue-class-component提供使用Class语法写Vue组件
vue-property-decorator在Class语法基础之上提供了一些辅助装饰器

devDependencies依赖：

依赖项说明
@typescript-eslint/eslint-plugin使用ESLint校验TypeScript代码
@typescript-eslint/parser将TypeScript转为AST供ESLint校验使用
@vue/cli-plugin-typescript使用TypeScript + ts-loader + fork-ts-checker-webpack-plugin进行更快的类型检查
@vue/eslint-config-typescript兼容ESLint的TypeScript校验规则
typescriptTypeScript编译器，提供类型校验和转换js功能

（2）shims-vue.d.ts文件的作用

// 主要用于 TypeScript 识别 .vue文件模块
// TypeScript 默认不支持导入 .vue 模块，这个文件告诉 TypeScript
// 导入 .vue 文件模块都按 VueConstructor<Vue> 类型识别处理
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

（3）shims-tsx.d.ts文件的作用

为jsx组件模板补充类型声明

定义Vue组件

1. 使用OptionsAPI定义Vue组件

在这里插入图片描述

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  // 类型推断已启用
  data(){
  	return{}
  }
})
</script>

2. 使用ClassAPIs定义Vue组件

如果您在声明组件时更喜欢基于类的 API，则可以使用官方维护的 vue-class-component 装饰器：
教程文档

import Vue from 'vue'
import Component from 'vue-class-component'

// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // 初始数据可以直接声明为实例的 property
  message: string = 'Hello!'

  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
  }
}

关于装饰器语法

装饰器是ES草案中的一个新特性，不过这个草案最近有可能发生重大调整，所以不建议生成环境使用

装饰器是一种特殊类型的声明，它能够加到类、方法，属性、参数上添加额外的功能
通俗的讲装饰器就是一个方法；在不修改类的情况下拓展方法；已是Es7标准特性之一

function testable(target){
	target.isTestable = true
}

@testable
class MytestableClass {
	// ...
}
console.log(MytestableClass.isTestable) // true

3. 使用Class APIS + VuePropertyDecorator创建Vue组件

这种方式继续放大了Class这种组件定义方法

import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class Button extends Vue {
	private count: number = 1
	private text: string = 'Click me'
	@Prop() readonly size?:string
	get content () {
		return `${this.text} ${this.count} `
	}
	increment () {
		this.count++
	}
	mounted () {
		console.log('button is mounted')
	}
}

个人建议：No Class APIS, 只用 Options APIs。

Class 语法仅仅是一种写法而已，最终还是要转换为普通的组件数据结构
装饰器语法还没有正式定稿发布，建议了解即可，正式发布以后在选择使用也可以

使用Options APIs最好是使用export default Vue.extend({...})而不是export default {...}

6. 代码格式化规范

代码格式规范介绍

在这里插入图片描述

良好的代码格式规范更有利于：

  • 更好的多人协作
  • 更好的阅读
  • 更好的维护

标准是什么

没有绝对的标准，下面是一些大厂根据多数开发这的编码习惯定制的一些编码规范，仅供参考

  • JavaScript Standard Style
  • Airbnb JavaScript Style Guide
  • Google JavaScript Style Guide
  • …

如何约束代码规范

我们项目中配置的具体代码规范是什么

vue代码风格指南

module.exports = {
  root: true,
  env: {
    node: true
  },
  // 使用插件的编码规则
  extends: [
    'plugin:vue/essential', // eslint-plugin-vue
    '@vue/standard', // @vue/eslint-config-standard
    '@vue/typescript/recommended' // @vue/eslint-config-typescript
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  // 自定义编码校验规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

如何自定义代码格式校验规范

Configuring Rules

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
在这里插入图片描述

ESLint校验规则
例：语句末尾必须加分号
在这里插入图片描述

'semi': ['error','always'] // 第一项是错误的级别，第二项是参数

注意：修改完后需要删除node_modules里的.cache缓存文件
ESLint Ts校验规则
例：ts接口中不需要加分号
在这里插入图片描述

'@typescript-eslint/member-delimiter-style':['error',
	{
	  "multiline": { // 多行
	    "delimiter": "none", // semi || comma || none
	    "requireLast": true
	  }
	}
]

7. 引入Element组件库

npm i element-ui -S

在main.ts中添加

import ElementUI from 'element-ui'
Vue.use(ElementUI)

8. 样式处理

在这里插入图片描述
variables.scss

// 公共样式变量
$primary-color: #40586f;
$success-color: #51cf66;
$warning-color: #fcc419;
$danger-color: #ff6b6b;
$info-color: #e9eef3; // #22b8cf;

$body-bg: #e9eef3; // #f5f5f9;

$sidebar-bg: #f8f9fb;
$navbar-bg: #f8f9fb;

$font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

index.scss

@import './variables.scss';

// 设置html样式
html {
  font-family: $font-family;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  // better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// 设置body样式
body {
  margin: 0;
  background-color: $body-bg;
}

// 更改 element 主题色（写法参考element官方文档）
$--color-primary: $primary-color;
$--color-success: $success-color;
$--color-warning: $warning-color;
$--color-danger: $danger-color;
$--color-info: $info-color;
//  改变 icon 字体路径变量，必需
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// 引入 element 默认主题文件（样式文件）
@import '~element-ui/packages/theme-chalk/src/index';
// node_modules/element-ui/packages/theme-chalk/src/common/var.scss

// overrides
// .el-menu-item, .el-submenu__title {
//   height: 50px;
//   line-height: 50px;
// }

.el-pagination {
  color: #868e96;
}

// components
.status {
  display: inline-block;
  cursor: pointer;
  width: .875rem;
  height: .875rem;
  vertical-align: middle;
  border-radius: 50%;

  &-primary {
    background: $--color-primary;
  }

  &-success {
    background: $--color-success;
  }

  &-warning {
    background: $--color-warning;
  }

  &-danger {
    background: $--color-danger;
  }

  &-info {
    background: $--color-info;
  }
}

在main.ts中引入

import './styles/index.scss'

共享全局样式变量
在这里插入图片描述
在vue.config.js中

module.exports = {
  css: {
    // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
    // 因为 `scss` 语法在内部也是由 sass-loader 处理的
    // 但是在配置 `prependData` 选项的时候
    // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
    // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
    loaderOptions: {
      scss: {
        prependData: '@import "~@/styles/variables.scss";'
      }
    }
  }
}

9. 配置后端代理

示例：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

10. 封装请求模块

npm i axios

在utils下新建request.ts

import axios from 'axios'

const request = axios.create({
  // 配置选项
  // baseURL,
  // timeout
})

// 请求拦截器

// 响应拦截器

export default request

11. 初始化路由组件

创建目录
创建目录

配置路由

{
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
},
{
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/index.vue')
}

创建layout目录index.vue

{
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        name: 'home',
        component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
      }
    ]
}

布局容器

layout/index.vue

<template>
  <el-container>
    <el-aside width="200px">
      <app-aside />
    </el-aside>
    <el-container>
      <el-header>
        <app-header />
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import Vue from 'vue'
import AppAside from './components/app-aside.vue'
import AppHeader from './components/app-header.vue'

export default Vue.extend({
  name: 'LayoutIndex',
  components: {
    AppAside,
    AppHeader
  }
})
</script>

<style lang="scss" scoped>
.el-container {
  min-height: 100vh;
  min-width: 980px; // 避免挤压导致不好看
}
.el-aside {
  background-color: #d3dce6;
}
.el-header {
  background-color: #ffffff;
}
.el-main {
  background-color: #e9eef3;
}
</style>

侧栏菜单

layout/components/app-aside.vue

<template>
  <div class="aside">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/role">
          <i class="el-icon-setting"></i>
          <span slot="title">角色管理</span>
        </el-menu-item>
        <el-menu-item index="/menu">
          <i class="el-icon-setting"></i>
          <span slot="title">菜单管理</span>
        </el-menu-item>
        <el-menu-item index="/resource">
          <i class="el-icon-setting"></i>
          <span slot="title">资源管理</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/course">
        <i class="el-icon-menu"></i>
        <span slot="title">课程管理</span>
      </el-menu-item>
      <el-menu-item index="/user">
        <i class="el-icon-document"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>广告管理</span>
        </template>
        <el-menu-item index="/advert">
          <i class="el-icon-setting"></i>
          <span slot="title">广告列表</span>
        </el-menu-item>
        <el-menu-item index="/advert-space">
          <i class="el-icon-setting"></i>
          <span slot="title">广告位列表</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppAside',
  methods: {
    handleOpen (key: string, keyPath: string): void {
      console.log(key, keyPath)
    },
    handleClose (key: string, keyPath: string): void {
      console.log(key, keyPath)
    }
  }
})
</script>

<style lang="scss" scoped>
.aside {
  .el-menu {
    min-height: 100vh;
  }
}
</style>

头部

layout/components/app-header.vue

<template>
  <div class="header">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar
          shape="square"
          :size="30"
          src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
        ></el-avatar>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>用户ID</el-dropdown-item>
        <el-dropdown-item divided>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppHeader'
})
</script>

<style lang="scss" scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-dropdown-link{
    display: flex;
    align-items: center;
  }
}
</style>

12. 登录处理

views/login.vue

<template>
  <div class="login">
    <el-form
      class="login-form"
      label-position="top"
      ref="form"
      :model="form"
      label-width="80px"
      :rules="rules"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-button
        class="login-btn"
        type="primary"
        @click="onSubmit"
        :loading="isLoginLoading"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import request from '@/utils/request'
import qs from 'qs'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'LoginIndex',
  data () {
    return {
      form: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1\d{10}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在6到18个字符', trigger: 'blur' }
        ]
      },
      isLoginLoading: false
    }
  },
  methods: {
    async onSubmit () {
      try {
        // 1. 表单验证
        await (this.$refs.form as Form).validate() // 若不传入回调函数，则返回一个promise
        // 2. 验证通过 -> 提交表单
        this.isLoginLoading = true
        const { data } = await request({
          method: 'POST',
          url: '/front/user/login',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          data: qs.stringify(this.form) // axios 默认发送的是application/json格式的数据
        })
        console.log(data)
        // 3. 处理请求结果
        //    失败：给出提示
        if (data.state !== 1) {
          this.$message.error(data.message)
        }else {
          //  成功：跳转到首页
          this.$router.push({
            name: 'home'
          })
          this.$message.success(data.message)
        }
      } catch (error) {
        console.log('登录失败', error)
      }
      // 结束登录按钮的 loading
      this.isLoginLoading = false
    }
  }
})
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 300px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }
  .login-btn {
    width: 100%;
  }
}
</style>

13. 封装请求方法

新建services/user.ts

/**
 * 用户相关请求模块
 */
import request from '@/utils/request'
import qs from 'qs'

interface User {
    phone: string
    password: string
}

export const login = (data: User) => {
  return request({
    method: 'POST',
    url: '/front/user/login',
    // headers: { 'content-type': 'application/x-www-form-urlencoded' },

    // 如果 data 是普通对象，则Content-Type 是 application/json
    // 如果 data 是 qs.stringify(data) 转换之后的数据: key=value&key=value
    // 则Content-Type会被设置为 application/x-www-form-urlencoded
    // 如果 data 是 FormData 对象，则Content-Type 是 multipart/form-data
    data: qs.stringify(data) // axios 默认发送的是application/json格式的数据
  })
}

14. 校验页面访问权限

router/index.ts

const routes: Array<RouteConfig> = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
  },
  {
    path: '/',
    component: Layout,
    meta: {
      requiresAuth: true // 自定义数据
    }, // meta 默认就是一空对象
    children: [
      {
        path: '/',
        name: 'home',
        component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
        // meta: {
        //   requiresAuth: true // 自定义数据
        // } // meta 默认就是一空对象
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/index.vue')
  }
]

const router = new VueRouter({
  routes
})

// 全局前置守卫：任何页面的访问都要经过这里
// to：要去哪里的路由信息
// from：从哪里来的路由信息
// next：通行的标志
router.beforeEach((to, from, next) => {
  // console.log('进入了全局路由守卫')
  console.log('to=>', to)
  console.log('from=>', from)

  // to.matched 是一个数组（匹配到是路由父级即以下的）
  // 如果当前孙辈||父辈有requiresAuth则匹配有没有登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.user) {
      // 跳转到登录页面
      next({ name: 'login' })
    } else {
      next()
    }
  } else {
    next()
  }

  // 路由守卫中一定要调用next, 否则页码无法展示
  // if (to.path !== 'login') {} // 校验登录状态
})

export default router

15. 登录成功跳转回原页面

router/index.ts

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.user) {
      // 跳转到登录页面
      next({
        name: 'login',
        query: { // 通过 url 传递查询字符串参数
          redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页
        }
      })
    } else {
      next()
    }
  } else {
    next()
  }
}

views/login/index.vue

//  成功：跳转到之前访问的页面或首页
this.$router.push(this.$route.query.redirect as string || '/')

16. 设置请求拦截器统一token

import axios from 'axios'
import store from '@/store'

const request = axios.create({
  // 配置选项
  // baseURL,
  // timeout
})

// 请求拦截器
request.interceptors.request.use((config: any) => {
  // 我们就在这里通过改写 config 配置信息来实现业务功能的统一处理
  const { user } = store.state
  if (user?.access_token) {
    config.headers.Authorization = user.access_token
  }
  // 注意：这里一定要返回 config，否则请求发不出去了
  return config
}, (error) => Promise.reject(error)) // 请求本身就出错了走这里
// 响应拦截器

export default request

17. 用户退出

穿透组件，将该函数注册到根元素

<el-dropdown-item divided @click.native="handleLogout">退出</el-dropdown-item>

 		// 清除登录状态
        this.$store.commit('setUser', null)

        // 跳转到登录页面
        this.$router.push({
          name: 'login'
        })
夏暖冬凉
关注
  • 5
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
四、手把手教你 Vue2+Ts
Mr丶Yang
03-01 1810
四、手把手教你 Vue2+Ts
vue2.0+ts
weixin_43843679的博客
11-22 3008
解决方案：需要引入component模块，此时，mounted/created才会执行（注意是在export外面），@Component修饰符注明了此类Vue组件。前言：在不了解vue+ts的情况下，跟着项目一葫芦画瓢，created/mounted等钩子怎么都不执行的问题。vue组件里大多数的方法改成通过@xxx(装饰器)来表明当前定义的数据。data中的数据由原来的data()方法改成直接在对象中定义。1、data（）中定义数据。
VUE2项目使用typescript
最新发布
一些coding知识记录
05-15 227
3. 项目根目录添加tsconfig.json文件。4. 重启项目，让webpack配置生效，我们即可新建ts文件，使用ts了。
五、手把手教你 Vue2+Ts
Mr丶Yang
03-02 1997
五、手把手教你 Vue2+Ts
vue2.x项目添加ts
情非得已小猿猿
01-19 4794
一、已有vue项目 1、安装依赖 npm i vue-class-component vue-property-decorator —S npm i ts-loader typescript tslint tslint-loader tslint-config-standard -D vue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts vue-property-decorator：基于vue-class-component扩展
TS在vue2项目中的写法
AllenZouJ的博客
03-15 9945
作为对照，先回忆一下js在vue2项目中的写法 <script> export default{ data(){ return {} }, methods:{}, computed:{}, filters:{}, watch:{}, created:{} } </script> 本来vue2是不支持TS的，如果要在项目中使用TS，就需要相应的插件和配置，虽然用起来有点尴尬，但终究也是能用了。 TS在vu
vue3+ts实战项目组件工具库.zip
03-03
vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip
Vue3 + TS + Vite - 大屏可视化 项目实战
06-10
三、项目使用Vue3 + Ts + Vite + pnpm 并集成了eslint 、prettier、stylelint、husky、commitizen 规约工具 四、采用抽离组件模式开发更加符合企业要求，手写更加熟练掌握大屏设配 五、组件包括有运营商定位、天气...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue+cli+ts项目实战.rar
04-02
vuecli4.0 +ts项目实战 项目主要技术为 view-design + moment+ echarts ，内有常年积累utils工具类 以及 css样式重置，博主多年珍藏半数在内
vue2项目引入ts实操记录(一)
每文的博客
04-01 7327
背景： vue2+ElementUi 原因： 之所以要在vue2中引入ts，是为了规范项目，更是为了后面学习vue3+ts做准备。 移入ts修改思路： 先修改.vue文件-----------再修改全局工具类.js文件-----待续。。。 正式内容： 第一步安装引入： npm install typescript ts-loader --save-dev npm install vue-property-decorator --save-dev 进行配置：vue.config.js中
Vue2+typescript写法总结
baidu_33164415的博客
12-27 1085
Vue2+typescript写法总结
vue2+ts
weixin_45450676的博客
04-12 4109
** vue2中使用ts ** 1.总的来说，在vue2 中使用ts并不难，只是在vue组件中稍有变化，把原先的es6 变成继承类型，其他都 基本一样，也是沿用的vue2的methods 等参数，所以本人建议 如果你想使用ts那就到vue3或者是react中去使用吧，在vue2中 使用ts基本上是给自己添加烦恼. ...
vue2项目中ts问题报错总结
weixin_68192136的博客
04-22 5452
1.eslint报类型错误:Type string trivially inferred from a string literal, remove type annotation @typescript-eslint/no-inferrable- types 解决方法: 在.eslintrc.js文件的rules 增加一行 "@typescript-eslint/no-inferrable-types": "off" // 关闭类型推断 rules: { "no-console": p..
vue2.0+ts 循环div，单独点击展开收起（简单model）
我只是个很菜的前端
08-31 701
vue2.0+ts 循环div，单独点击展开收起（简单model）
Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day01
m0_55644132的博客
10-25 1148
vue2项目实战
vue2.x+vuex+TS项目实战基础篇
fmoment的博客
12-01 3445
本教程记录基于ts的vue2.0技术栈的学习过程，主要记录vuex的State、Getters、Mutation、Action、mapState、mapGetters、mapMutations、mapActions的使用方法。
VUE+TS+WEBPACK框架的项目实践
热门推荐
码匠哥的技术博客
08-27 1万+
一、作者简介 WONDER专注于框架的研究，致力于提升效能，解放生产力。包括但不限于设计流程化，重构流程化，前端流程化，基于数据流、状态流的自动化测试。致力于基于javascript语言的全平台解决方案的研究（包括前端(vue为核心)，后端(thinkjs为核心)，终端(weex为核心、小程序为辅助)），目标以「技术引擎」的思想为业务侧提供强劲动力和生产力。 二、前言 很久以前在WOND
vue3+ts项目实战
08-24
对于Vue 3和TypeScript的项目实战，有以下几个步骤可以参考： 1. 创建一个新的Vue 3项目：可以使用Vue CLI来快速创建一个基本的Vue 3项目。通过命令行运行`vue create`命令，选择使用TypeScript作为项目的语言支持...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值