---

提示：本文是VUE企业网站定制开发项目开发的流程梳理，企业网站定制开发是对本专栏博客的梳理

一、

1. 搭建VUE环境，可参考
2. 下载使用yarn，可参考

二、

企业网站定制开发这里只介绍其中我所熟企业网站定制开发知的两种方式

1. 企业网站定制开发外部终端创建

1. 在存储vue项目的目录，清除路径并输入cmd，回车，进入当前目录的命令行终端
   
2. 创建vue项目
   注意名称不可用大写英文

   vue create demo_01
   1

3. 根据自己需要选择模式，这里我选择自定义模式
   
4. 创建好的项目在IDea中打开即可

2. IDea内部终端创建

1. 在IDea打开Termial，输入如下代码

   vue create demo_01
   1

2. 选择模式，然后创建，创建完毕后，即可在左侧目录找到项目
   

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
   

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

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'	var app=createApp(App)	// 使用ElementPlusapp.use(ElementPlus)	app.use(router).mount('#app')
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

四、前端开发流程

1. 创建组件与编码

1. 在views目录下创建组件
   可创建文件夹进行分类管理
   

2. 对组件进行编码

   标签	作用
   template	可理解为Body部分，但template只能放置一个控件，如果需要放置多个控件，可以嵌套放在div控件中
   script	JS脚本的部分
   tyle	编写样式部分

<!--写页面内容的部分，与Body类似--><template>    <div id="container">        <h5>我的第一个组件</h5>        <button>点击我看看</button>    </div></template><!--写JS脚本--><script>    export default {        // 组件命名，必须存在        name: "UserReg"    }</script><!--编写样式的--><style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 配置组件路由

1. 引入组件

   //先引入编写好的组件import HomeView from '../views/HomeView.vue'import UserReg from "@/views/users/UserReg";import Hello from "@/views/Hello/Hello";import Main from "@/views/main/Main";
   1
   2
   3
   4
   5

2. 配置路由

   //  配置路径、名称、组件const routes = [  {    path: '/',    name: 'home',    component: HomeView  },  {    path: '/about',    name: 'about',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')  },  {    path:'/userReg',    name:'/UserReg',    component:UserReg  },  {    path:'/hello',    name:'/Hello',    component:Hello  },  {    path:'/main',    name:'/Main',    component:Main  }]
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31

完整代码

import { createRouter, createWebHistory } from 'vue-router'//先引入编写好的组件import HomeView from '../views/HomeView.vue'import UserReg from "@/views/users/UserReg";import Hello from "@/views/Hello/Hello";import Main from "@/views/main/Main";//  配置路径、名称、组件const routes = [  {    path: '/',    name: 'home',    component: HomeView  },  {    path: '/about',    name: 'about',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')  },  {    path:'/userReg',    name:'/UserReg',    component:UserReg  },  {    path:'/hello',    name:'/Hello',    component:Hello  },  {    path:'/main',    name:'/Main',    component:Main  }]const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes})export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3. 运行

Termial上运行vue，点击链接即可

注意，vue支持热部署，在vue启动期间，如果文件发生改变，vue无需重新启动，刷新页面即可

五、前后端交互

这里参考我的另一个博客，不再赘述