前端工程初始化步骤

初始化环境准备

适用零基础了解启动项目初始化步骤

创建vue工程

npm init vue@latest

安装依赖

element-plus：页面组件库，

npm install element-plus --save

并在main.js文件中导入依赖和样式

import './assets/main.css'
​
import { createApp } from 'vue'
​
import ElementPlus from 'element-plus' //导入依赖
import 'element-plus/dist/index.css' //导入element plus样式
​
import App from './App.vue'
​
const app = createApp(App);
app.use(ElementPlus); //vue的应用实列上使用ElementPlus
app.mount('#app') //挂载

Axios：异步函数库

npm install axios

Sass：css的源扩展包

npm install sass -D

• 自动生成的目录调整

删除components下面自动生成的内容
新建目录api、utils、views
将静态文件拷贝到assets目录下（例如：图片）
删除App.vue中自动生成的内容

• 启动项目

npm run dev

出现这个页面别慌。因为我们删除了assets目录下面的内容，

并使用sass扩展语言包样式，使用我们需要修改main.js的导入

import './assets/main.scss' //使用sass扩展语言包的样式

准备工作太麻烦？？？

也可以直接使用初始工程（已经安装好依赖的工程目录）

工程目录更改名字就可以用于多个项目的初始化使用。