【Vue + TS】项目架构、环境搭建 -------（Vite)安装初始化（一）

前言

“学习能力也好，执行力也罢，核心只有一个：在刚开始的时候，平静地接受自己的笨拙。” 本篇文章是 Vue项目基于 Vite初始化的过程，借此记录一下，巩固基础！

第一章 安装 Vite，本篇基于npm进行（请检测自己的node版本）

具体可看：Vite官方中文文档

npm install -g create-vite-app

全局安装vite，可能会出现：

npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. 
run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.

继续输入：

npm init @vitejs/app

第二章 创建项目

创建一个空的项目文件夹，用vscode打开，
打开终端，执行命令：

npm init vue@latest

会出现（以下是示例）：

√ Project name: ... code1 （项目名字）
√ Add TypeScript? ... No / Yes （是否要添加TypeScript）
√ Add JSX Support? ... No / Yes （是否添加JSX，一般React用的比较多，Vue用的少，选择No）
√ Add Vue Router for Single Page Application development? ... No / Yes（是否添加VueRouter，根据需要选择）
√ Add Pinia for state management? ... No / Yes （是否添加Pinia，状态管理器，根据需要选择）
√ Add Vitest for Unit Testing? ... No / Yes （是否添加单元测试）
√ Add an End-to-End Testing Solution? » No （是否添加 端到端 测试）
√ Add ESLint for code quality? ... No / Yes （是否使用ESLint 进行代码检测 质量问题，一般选Yes）
√ Add Prettier for code formatting? ... No / Yes （是否添加Prettier进行项目代码格式化保存，保持项目代码风格一致，可根据需要进行配置！）

选择完成后会出现以下提示：

cd code1
npm install
npm run lint
npm run dev

按照要求，打开初始化后的项目文件，并且npm install ，安装相关的node_modules依赖， 然后进行启动。

第三章 项目配置

安装对应的插件：

"Vue.volar",
 "Vue.vscode-typescript-vue-plugin"

配置vue文件模块（env.t.ts)：

declare module '*.vue' {
    
    
  import {
    
     DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

配置项目代码规范：

• 安装 EditorConfig for VS Code 插件；
• 集成 editorconfig配置：

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

使用prettier工具：npm install prettier -D

第四章 项目目录结构划分

第五章 CSS样式的重置

npm install normalize.css

在main.ts进行引入， import 'normalize.css'

进行样式重置文件：

/* reset.css样式重置文件 */
/* margin/padding重置 */
body, h1, h2, h3, ul, ol, li, p, dl, dt, dd {
    
    
  padding: 0;
  margin: 0;
}

/* a元素重置 */
a {
    
    
  text-decoration: none;
  color: #333;
}

/* img的vertical-align重置 */
img {
    
    
  vertical-align: top;
}

/* ul, ol, li重置 */
ul, ol, li {
    
    
  list-style: none;
}

/* 对斜体元素重置 */
i, em {
    
    
  font-style: normal;
}

第六章 网络请求封装axios

npm install axios

//request.ts
import axios from 'axios';
const baseURL = '';
const service = axios.create({
    
    
  baseURL,
  timeout: 5000, // request timeout
});
// 发起请求之前的拦截器
service.interceptors.request.use(
  (config) => {
    
    
    // 如果有token 就携带tokon
    const token = window.localStorage.getItem('accessToken');
    if (token) {
    
    
      config.headers.common.Authorization = token;
    }
    return config;
  },
  (error) => Promise.reject(error)
);
// 响应拦截器
service.interceptors.response.use(
  (response) => {
    
    
    const res = response.data;

    if (response.status !== 200) {
    
    
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
    
    
      return res;
    }
  },
  (error) => {
    
    
    return Promise.reject(error);
  }
);
export default service;

import request from "../utils/request";

request({
    
    url: "/profile ",method: "get"})
.then((res)=>{
    
    
  console.log(res)
})

第七章 状态管理（vuex / pinia）

第八章 区分开发环境和生产环境

在 根目录 下创建 .env.development 和 .env.production 文件。

// .env.development
VITE_APP_ENV = 'development'

// .env.production
VITE_APP_ENV = 'production'

修改 package.json，对环境变量进行配置。

//package.json	  
"scripts": {
    
    
  "dev": "cross-env NODE_ENV=development vite",
  "build:dev": "vite build --mode development",
  "build:pro": "vite build --mode production"
},

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