前端 | 前端工程化

---

前端工程化

1. Vue项目创建

• 安装插件vue-cli

npm install -g @vue/cli

• 命令行创建 Vue 项目

vue create vue-project(项目名称)

• 图形化界面创建 VUe 项目

vue ui

• 图形化界面如下：

选择功能：

第一步：创建项目名称，选择包管理器

第二步：手动配置

第三步：勾选router（路由功能）

第四步：选择 vue2.0（企业主流），默认第一个语法检查

2. Vue项目目录结构

• vue项目的标准目录结构以及目录对应的解释：

• 修改 vue 端口号

// 修改vue.config.js文件的内容
devServer:{
    port:7000
}

3. vue项目开发

• 项目框架：

<template>
  <div id="app">
    {{message}}
  div>
template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
script>

<style>

style>

4. Vue路由

4.1 安装路由

npm install vue-router@3.5.1

4.2 路由组成

vue官方提供了路由插件Vue Router,其主要组成如下：

• VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
• >：请求链接组件，浏览器会解析成
• >：动态视图组件，用来渲染展示与路由路径对应的组件

4.3 定义路由表

• 在src/router/index.js文件中定义路由表

import Vue  'vue'
import VueRouter  'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  }
]

const router = new VueRouter({
  routes
})

export default router

4.4 设置路由标签

• 在 View 中设置

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理router-link>
el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理router-link>
el-menu-item>

• 在 App.vue 中设置

<template>
  <div id="app">
    <router-view>router-view>
  div>
template>

<script>
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
script>
<style>

style>

5. Vue项目打包部署

5.1 前端工程打包

• 通过VS Code的NPM脚本中提供的build按钮

• 打包生成dist目录，可以复制到nginx目录的html文件夹中

5.2 前端工程部署

5.2.1 工具 Nginx

• Nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

• 目录：

5.2.2 部署

• 在conf/nginx.conf文件，修改Nginx的监听端口号：默认80.

• 在网址输入localhost:端口号，跳转到部署网页