当前位置: 首页 > news >正文

Vue3+TypeScript项目实战day1——项目的创建及环境配置

项目介绍

  • 项目预览地址:http://152.136.185.210
    • 账号1:coderwhy 密码:123456 账号2:coderdemo 密码:123456
  • 接口地址:
    • 接口v1
      https://documenter.getpostman.com/view/12387168/TzsfmQvw
    • baseURL的值:
      http://152.136.185.210:4000```
      
    • 设置全局token的方法:
      pm.globals.set("token",res.data.token);```
      
    • 接口v2
      https://documenter.getpostman.com/view/12387168/TzzDKb12
  • 技术栈介绍:
    • 开发工具:Visual Studio Code
    • 编程语言:TypeScript 4.x+JavaScript
    • 构建工具:Vite3.x/Webpack5.x
    • 前端框架:Vue3.X+setup
    • 路由工具:Vue Router4.x
    • 状态管理:Vuex4.x/Pinia
    • Ul框架:Element Plus
    • 可视化:Echart5.x
    • 工具库:@vueuse/core+dayjs+countup,js等等
    • CSS预编译:Sass/Less
    • HTTP工具:Axios
    • Git Hook工具:husky
    • 代码规范:EditorConfig+Prettier+ESLint
    • 提交规范:Commitizen+Commitlint
    • 自动部署:Centos+Jenkins+Nginx

创建Vue项目

  • 方式一:Vue CLI
    • 基于webpack工具;
    • 命令:vue create project-name
  • 方式二:create-vue
    • 基于vite工具;
    • 命令:npm init vue@latest
  • 项目配置:
    • 配置项目的icon
    • 配置项目的标题
    • 配置项目别名等(vite默认配置)
    • 配置tsconfig.json

配置项目环境

安装volar和volar+TS插件:
在这里插入图片描述
配置vue文件模块:
在这里插入图片描述

使用prettier工具

Prettier是一款强大的代码格式化工具,支持JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、
Vue、GraphQL、JSON、Markdown等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码
格式化工具。

  1. 安装prettier
    npm install prettier -D
  2. 配置.prettierrc,文件:
  • useTabs:使用tab缩进还是空格缩进,选择false;
  • tabWidth:tab是空格的情况下,是几个空格,选择2个;
  • printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
  • singleQuote:使用单引号还是双引号,选择true,使用单引号;
  • trailingComma:在多行输入的尾逗号是香添加,设置为none,比如对象类型的最后一个属性后面是否加一
    个;
  • semi:语句末尾是否要加分号,默认值true,选择false表示不加;
{
"useTabs":false,
"tabwidth":2,
"printwidth":80,
"singleQuote":true,
"trailingComma":"none",
"semi":false 
}
  1. 创建.prettierignore忽略文件
    /dist/*
    .local
    output.js
    /node_modules/**
    */*.5Vg
    **/*.sh
    /public/*```
    
  2. VSCode:需要安装prettier的插件
    在这里插入图片描述
  3. VSCod中的配置
  • settings=>format on save=>勾选上
  • settings =>editor default format =>选择prettier在这里插入图片描述
  1. 测试prettier是否生效
  • 测试一:在代码中保存代码:
  • 测试二:配置—次性修改的命令:
    在package,json中配置一个scripts:
    "prettier":"prettier --write."

使用ESLint检测

  1. 在前面创建项目的时候,我们就选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。
  2. VSCode需要安装ESLint插件:
    在这里插入图片描述
  3. 解决eslint和orettier)冲突的问题:
    安装插件:(Vue在创建项目时,如果选择prettier,那么这两个插件会自动安装)
    npm install eslint-plugin-prettier eslint-config-prettier -D
    添加prettier插件:
    "plugin:vue/vue3-essential",
    "eslint recommended",
    "@vue/typescript/recommended",
    "Qvue/prettier",
    "Qvue/prettier/@typescript-eslint",
    plugin:prettier/recommended'
    ]```
    

区分developmenta和production环境

  • Vite的环境变量:

  • Vite在一个特殊的import…eta.env对像上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:

    • import.meta.env.MODE:{string}应用运行的模式。
    • import.meta.env.PROD:{boolean}应用是否运行在生产环境。
    • import.meta.env.DEV:{boolean}应用是否运行在开发环境(永远与import.meta.env.PROD相反)。
    • import.meta.env.SSR:{boolean}应用是否运行在server上。
      // 1.区分开发环境和生产环境
      

    // export const BASE_URL = ‘http://coderwhy.dev:8000’
    // export const BASE_URL = ‘http://codercba.prod:8000’

    // 2.代码逻辑判断, 判断当前环境
    // vite默认提供的环境变量
    // console.log(import.meta.env.MODE)
    console.log(import.meta.env.DEV) // 是否开发环境
    console.log(import.meta.env.PROD) // 是否生产环境
    console.log(import.meta.env.SSR) // 是否是服务器端渲染(server side render)

    let BASE_URL = ‘’
    if (import.meta.env.PROD) {
    BASE_URL = ‘http://codercba.prod:8000’
    } else {
    BASE_URL = ‘http://coderwhy.dev:8000’
    }

    console.log(BASE_URL)

    // 3.通过创建.env文件直接创建变量
    console.log(import.meta.env.VITE_URL)

    export const TIME_OUT = 10000
    export { BASE_URL }

  • Vite使用dotenv从你的环境目录中的下列文件加载额外的环境变量:
    在这里插入图片描述在这里插入图片描述

  • 只有以VITE为前缀的变量才会暴露给经过vite处理的代码。

http://www.dtcms.com/a/315181.html

相关文章:

  • pytorch 学习笔记(2)-实现一个线性回归模型
  • sqli-labs通关笔记-第30关GET字符注入(WAF绕过 双引号闭合 手工注入+脚本注入两种方法)
  • QCustomplot极坐标系绘制
  • Qt项目模板全解析:选择最适合你的开发起点
  • Gitee:本土化DevOps平台如何助力中国企业实现高效研发协作
  • 水面垃圾清扫船cad【6张】三维图+设计说明书
  • C语言实现Elasticsearch增删改查API
  • OpenCV学习 day4
  • Pytorch-05 所以计算图和自动微分到底是什么?(计算图及自动微分引擎原理讲解)
  • AI 大模型分类全解析:从文本到多模态的技术图谱
  • AcWing 890. 能被整除的数 (容斥原理)
  • Web Scraper实战:轻松构建电影数据库
  • 直角坐标系里的四象限对NLP中的深层语义分析的积极影响和启示
  • 【Algorithm | 0x03 搜索与图论】DFS
  • AtCoder Beginner Contest 416 C 题
  • 【软件与环境】--腾讯云服务器的使用和部署
  • 【软件与环境:虚拟机】--VMware Workstation 16 pro安装+Cenos7
  • 8位以及32位的MCU如何进行选择?
  • 机器学习实战:逻辑回归深度解析与欺诈检测评估指标详解(二)
  • JVM相关知识
  • Servlet 相关笔记整理
  • shell脚本tcpdump抓取数据解析执行关机指令
  • Javascript面试题及详细答案150道之(031-045)
  • ES集群调优策略
  • NetBSD notes[1]
  • Redis 常用数据结构以及单线程模型
  • 力扣热题100------21.合并两个有序链表
  • Redis分布式锁简单实现
  • 安卓的NDK、ABI、JNI到底是指啥?区别与联系是?
  • Prometheus-3--Prometheus是怎么抓取Java应用,Redis中间件,服务器环境的指标的?