vue脚手架以及Vite搭建项目

一城烟雨_

已于 2024-05-07 18:47:48 修改

阅读量2.1k

点赞数 48

文章标签： vue.js javascript 前端

于 2024-04-25 11:51:11 首次发布

本文链接：https://blog.csdn.net/w1314_1314/article/details/138182669

版权

本文详细介绍了如何使用VueCLI和Vite构建Vue3项目，包括全局安装、创建项目、配置文件修改、模块添加（如TailwindCSS、ElementPlus、VueRouter、Pinia和Axiox）等关键步骤。

摘要由CSDN通过智能技术生成

2.4 修改vite.config.ts 文件，使用@ 代替/src

2.5 修改 tsconfig.json 文件

3.vite项目其他模块添加

3.1.tailwindcss(css库添加) tailwindcss CSS库的引入

3.2 element plus 饿了么引入 element plus 饿了么ui引入

3.3 vue3.0 router的安装以及使用 vue3.0 router的安装以及使用

3.4 vue3.0 安装使用pinia vue3.0 安装使用pinia 以及pinia的持久化

3.5 vue3.0 axiox模块添加 vue3.0 axiox模块添加

1. vue脚手架搭建项目

1.1 全局安装cli脚手架

npm i @vue/cli -g

1.2 测试是否安装成功

# 安装成功会出现版本号

vue -V

1.3 创建VUE项目

vue create 项目名

1.4 项目配置

1. 选择预设

Please pick a preset: (Use arrow keys) ----使用键盘上下键选择回车确定
default (babel, eslint) ----默认只安装babel和eslint
Manually select features ---- 自定义

2.手动选择插件

Check the features needed for your project: ----空格选择，a全选，i反选回车确定
Babel ---- 将高级版本ES转换为浏览器识别的JS语法
TypeScript---- JS的超集，提供了JS面向对象支持
Progressive Web App (PWA) Support ----渐进web app支持
Router ----路由、请求所对应的地址
Vuex ---- 数据状态管理器、用于多页面传参
CSS Pre-processors ----CSS预处理，将高级CSS语法转换为浏览器识别CSS语法
Linter / Formatter ----语法检测
Unit Testing ----单元测试
E2E Testing ----测试

3. 选择路由模式

Use history mode for router?
History模式---- yes
Hash模式---- no 路由的后方有#只刷新部分内容（建议采用）

4.选择CSS预处理

Pick a CSS pre-processor
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)

5.选择插件的配置存放

Where do you prefer placing config for Babel, ESLint, etc
In dedicated config files ----独立的配置文件
In package.json ----放在package.json中

6.是否保存预设

Save this as a preset for future projects ----是否把你选择的作为预设
N不保存 Y保存

1.5 运行项目

# 运行项目项目创建成功

npm run serve

2. Vite搭建项目

2.1 安装vite

# 使用npm 或者 yarn 全局安装Vite

npm install -g create-vite

2.2 创建 Vue 3 项目

# 准备一个空文件夹，执行以下命令

create-vite dome --template vue-ts

# dome 替换为你的项目名称。--template vue-ts 表示使用 Vue 3 和 TypeScript 模板。

2.3 进入项目文件

# 第一步安装依赖

npm install

# 第二步运行项目

npm run dev

2.4 修改vite.config.ts 文件，使用@ 代替/src

# 安装path的依赖
npm install --save-dev @types/node

# 修改vite.config.ts 文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.vue', '.ts'],
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
})

2.5 修改 tsconfig.json 文件

# 使用@代替src 会出现引入地址报红线问题 但是不影响运行项目
# 应该要修改tsconfig.json 文件，添加我们前面修改的映射，可以添加如下
 
"baseUrl": ".",
"paths": {
     "@/*": ["src/*"]
 }


# 也可以使用以下 全部替换tsconfig.json 文件

{
  "compilerOptions": {
    // TypeScript 类型声明文件，包含 Node.js 类型
    "types": ["node"],
    // 目标 ECMAScript 版本
    "target": "ES2020",
    // 启用类字段定义
    "useDefineForClassFields": true,
    // 模块类型
    "module": "ESNext",
    // 编译时可用的库
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    // 跳过声明文件的类型检查
    "skipLibCheck": true,
 
    /* Bundler mode（打包器模式） */
    // 模块解析策略（在 bundler 模式下使用）
    "moduleResolution": "bundler",
    // 允许导入 TypeScript 文件时省略后缀
    "allowImportingTsExtensions": true,
    // 允许导入 JSON 文件作为模块
    "resolveJsonModule": true,
    // 将每个文件视为独立的模块
    "isolatedModules": true,
    // 不生成输出文件
    "noEmit": true,
    // 保留 JSX 代码
    "jsx": "preserve",
 
    /* Linting（代码检查） */
    // 开启所有严格类型检查选项
    "strict": true,
    // 报告未使用的局部变量
    "noUnusedLocals": true,
    // 报告未使用的函数参数
    "noUnusedParameters": true,
    // 报告在 switch 语句中的 case 语句贯穿
    "noFallthroughCasesInSwitch": true,
 
    // 基准 URL，用于解析非相对模块名称
    "baseUrl": ".",
    // 路径映射，用于将导入路径映射到基准 URL 下的特定路径
    "paths": {
      "@/*": [
        "src/*"
      ],
      "element-plus/*": ["node_modules/element-plus/*"]
    }
  },
  // 需要进行编译的文件路径模式
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  // 引用其他 TypeScript 配置文件的路径
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}