VUE项目环境准备笔记

VUE项目环境准备笔记

在项目文件夹下打开cmd,输入以下指令创建vue项目（需要在有网环境下并下载配置好nodejs）

1.创建Vue工程

npm init vue@latest

请输入项目名称： » vue-project
√ 请输入项目名称： … vue-project
√ 是否使用 TypeScript 语法？ … 否 / 是
√ 是否启用 JSX 支持？ … 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
√ 是否引入 Pinia 用于状态管理？ … 否 / 是
√ 是否引入 Vitest 用于单元测试？ … 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
项目构建完成，可执行以下命令：
cd vue-project
npm install
npm run dev
E:\Workspaces\Vscode\eoffice>cd vue-project

2.安装VUE项目所需要的依赖

npm install

可以在cmd使用code .指令用vscode打开项目，也可以直接vscode打开项目所在文件夹

3.安装其他依赖

1.Element-Plus

npm install element-plus --save 

1.1安装加载完毕后可以在项目node_modules目录下检查element依赖是否导入成功
1.2在项目src/main.js添加如下代码：

import './assets/main.css'  // 导入主要的样式文件
import { createApp } from 'vue'  //导入vue
import ElementPlus from 'element-plus' //导入element-plus
import 'element-plus/dist/index.css'   //导入element-plus的样式
import App from './App.vue'   // 导入根组件（App.vue）

const app= createApp(App);    // 创建Vue应用实例
app.use(ElementPlus);   // 在Vue应用实例中使用Element Plus
app.mount('#app')  // 将Vue应用挂载到指定的HTML元素上

2.Axios

npm install axios 

2.1安装加载完毕后可以在项目node_modules目录下检查axios 依赖是否导入成功

3.Sass

npm install sass -D

3.1安装加载完毕后可以在项目node_modules目录下检查sass 依赖是否导入成功

4.目录调整

4.1. 删除项目文件夹src/components下面所有自动生成的内容

4.2. src目录下新建文件夹api、utils、views

4.3. 将资料中的静态资源拷贝到assets目录下并删除自动生成的内容

4.4. 删除App.uve中自动生成的内容，保留部分如下：

<script setup>
</script>

<template>
</template>

<style scoped>
</style>