Vue介绍及项目搭建全过程流程

1. 什么是vue？

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网(https://v2.cn.vuejs.orgl)

2.vue常用指令

• 指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如:v-if ,v-for…
• 常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

3.Vue的生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态	阶段周期
beforecreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

4.Vue-cli

• 介绍: Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
• Vue-cli提供了如下功能:
  • 1.统一的目录结构
  • 2.本地调试
  • 3.热部署
  • 4.单元测试
• 集成打包上线依赖环境:Node.js

5.Node.JS和Vue-cli的安装

1. 先从官网下载安装包，然后再直接安装，不用执行或勾选其他的选项。
2. 一定记住安装路径。
3. 在cmd命令中输入node -v，检测是否安装成功，查看版本号。
4. 配置npm的全局安装路径：以管理员身份运行命令行，在命令中执行如下指令npm config set prefix "D:\NodeJS"
5. 在命令行继续输入指令：npm config get prefix，查看命令行是否安装成功。
6. 切换淘宝镜像：后期加速资源下载，继续输入指令npm config set registry https://registry.npm.taobao.org。
7. 安装Vue-cli：继续输入指令npm install -g @vue/cli,电脑联网下载，可能要等一会。
8. 查看Vue-cli是否安装成功：vue --version,检查版本号。

6.创建Vue项目

1. 新建名为vue的文件夹
2. 在cmd命令打开此文件夹
3. 在命令提示符中键入vue ui,调用图形化界面
4. 根据图形化界面操作
5. 新建窗口打开vue文件夹
6. 基于脚手架创建出来的项目有标准的目录结构：

文件名	作用
node_modules	整个项目的依赖包public
public	存放项目的静态文件
src	存放项目的源代码
package.json	模块基本信息,项目开发所需要模块，版本信息
vue.config.js	保存vue配置的文件，如:传理、端口的配置等

src下的子目录文件

文件夹	作用
assets	静态资源
components	可重用的组件
router	路由配置
views	视图组件(页面)
App.vue	入口页面(根组件)
main.js	入口js文件

Vue的组件文件以.vue结尾，每个组件由三个部分组成:,

• 模板部分,由它生成HTML代码:

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

• 控制模板的数据来源和行为:

<script>
export default {
data(){
return {
message: "Hello vue-cli"}
}}
</script>

• Css样式部分:

<style>#app {
font-family: Helvetica，Arial， sans-serif;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;text-align: center;
color: #2c3e50;}
</style>

7.vue项目的启动

• 方式一：图像化界面:在下方的NPM脚本中运行名为serve vue-cli-service...。

没有npm脚本的。在设置->用户->Npm->Package Manger->选择npm!
还需要勾选：Npm: Enable Run From Folder，这样就会在左侧大纲右击鼠标点击显示就行。

• 方式二：在当前目录的cmd命令行中，输入npm run serve。

8.配置修改端口

在vue.config.js文件中加入一段dveServer代码，在port中更改端口号

const {defineConfig } = require('@vue/cli-service')
    module.exports = defineconfig({
    transpileDependencies: true,
    devServer: {
        port: 7000,
    }
})

修改之后需要清理重新运行一下项目：在下面终端中使用快捷键Ctrl+C根据提示进行结束项目运行，然后重启项目,此时端口号就被修改。

9.Element快速入门

1. 安装ElementUI组件库(在当前工程的目录下)，在命令行执行指令:

npm install element-ui@2.15.3

2. 引入ElementUI组件库
   在main.jg文件中引入文件，输入的代码如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk /index.css';
Vue.use(ElementUI);

3. 访问官网，复制组件代码，调整调试代码。
4. 但是现在还是不能在页面上显示，还需要在App.vue中引入ElementView.vue代码
   在App.vue中的template写入:<element-view></element-view>;
   在script标签下中写入：import ElementView from './views/element/ElementView.vue',在export default中引用：components:{ElementView},，即可在页面显示。

10.在Vue中使用axios完成数据的异步加载

1. 在项目的目录下安装axios：npm install axios ;
2. 在需要使用axios时，需要导入axios：在script标签中输入import axios from "axios".

11.Vue中的路由Router

1. 介绍: Vue Router是Vue的官方路由。
2. 组成：

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

3. 路由的使用：

• 安装：在项目路径下运行终端命令npm install vue-router@3.5.1

在创建vue项目时可以勾选router选项来避免上述的安装操作

• 定义路由在router文件夹下的index.js文件中

12.前端Vue项目的打包部署

1. 打包：运行脚本build vue-cli-service build,将打包好的文件放在dist文件夹中，然后再在服务器中部署项目。
2. NGINX介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

• 官网：https://nginx.org/;
• Nginx文件目录：

文件名	内容
conf	配置文件目录
contrib
docs
html	静态资源文件目录
logs	日志文件目录
temp	临时文件目录
nginx.exe	启动文件

3. 部署：打包完成后，将项目部署在Nginx中(部署前端的静态资源)。
   将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。
4. 启动:双击nginx.exe文件即可，Nginx服务器默认占用80端口号

可能会有进程占用了80端口，所以可以通过cmd命令查看是哪个占用了端口：netstat -ano | findStr 80
可以将端口更换：conf/nginx.conf目录下的文件中的server 中的listen后面的值进行修改，如：90等。

5. 访问：在浏览器中输入localhost：80 //后面数字是端口号