VUE项目开发的完整流程

一、VUE环境搭建

搭建VUE环境，可参考vue环境描述

二、创建VUE项目

1、建好文件夹

建好本地文件目录，用于保存项目

2、创建vue项目

注意名称不可用大写英文

vue create demo_01

1670912828122.png

3、根据自己需要选择模式

这里我选择自定义模式
1670912942115.png
然后选择Babel和Router,上下键是选择不同的模式，空格键是选择和取消，选中时前面有*，再按下空格键该*取消
1670913101139.png
下一步选择3.x版本即可
1670913148561.png
然后选择y
1670913204025.png
然后选择In package.json
1670913246755.png
然后一路y就行
1670913422477.png
输入模板名字my_model_01
image.png
然后项目开始创建

3、项目介绍

我们编程的内容主要在src文件夹中，目录介绍：

  1. assets：用于存储页面显示的图片资源
  2. components：views中的公共部分存储在此
  3. router：存储路由信息，用于页面跳转
  4. views：存储页面组件，是编程的重心
  5. App.vue：个人理解就是普通首页，可以随意更改
  6. main.js：整个vue项目的公共配置

4、vue 的特别之处

原始网页是Header+Body作为一个整体的开发，vue是将Header、Body作为单独组件分开开发，与封装的思路是一样的，所以现在不称为页面，称为组件。以前的衣服是一套一套地设计，外套、衬衫、裤子、鞋一起设计，成套的设计。vue是将外套、衬衫、裤子、鞋分开设计，然后再自由组合成一套衣服。

添加前端开发插件依赖

1、打开vue项目，进入外部/内部终端，下载element

下载命令：npm install element-plus --save
1670913675267.png

2、下载完成后即可在package.json中查看

1670913739285.png
1670913789027.png

3、修改公共配置文件main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入依赖
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).mount('#app')

// 使用ElementPlus
var app=app.use(ElementPlus)
	
app.use(router).mount('#app')