VUE

1.安装VUE Cli

本项目的前端项目将使用“Vue脚手架”项目来开发，必须先在本机安装Node.js（可参考教程），然后，在命令提示符窗口中通过npm命令安装@vue/cli：

npm install -g @vue/cli

只要没有出现错误（ERR / ERROR）字样即可。如果安装过程卡住了，可以按下Ctrl + C来终止当前命令的执行，并再次尝试执行安装命令即可。

安装过程如下图所示：

image-20221028101549776

当安装完成后，可以通过以下命令来检查是否安装成功：

vue -V

注意：以上命令中的-V中的字母是大写的！

如果能够正常的显示版本号，则表示安装成功！

2. 创建Vue脚手架项目

在创建项目之前，先确定当前操作位置，例如：

image-20221028102612032

以上提示符表示当前的操作位置在：C盘下的Users文件夹下的ChengHeng文件夹下。

此操作位置决定了项目将被创建在此文件夹下。

通过vue create 项目名称命令即可创建项目，例如：

vue create Webmaster

当输入以上命令后，按1次回车键，此时可能会有一些卡顿，不要做任何操作，等待窗口的提示内容发生变化，然后，会进入创建向导，创建项目的各参数为：

image-20221028103012417

image-20221028103126105

image-20221028103200732

image-20221028103217748

image-20221028103252853

（最后还有一步，也是直接按回车键即可）

当全部选择完成后，会自动开始创建当前项目，最后，看到Successfully字样则表示创建成功，如下图所示：

image-20221028103435494

则可以在命令提示符对应的位置找到新创建的项目。

可以将项目移动到常用的文件夹中，并可以使用IntelliJ IDEA打开此项目：

image-20221028110706171

3. 启动Vue脚手架项目

在IntelliJ IDEA中打开项目后，点击下方的Terminal即可打开终端面板

image-20221028110943151

在终端窗口中，执行**npm run serve命令，即可启动当前项目，当启动成功后，可以看到successfully**字样，如下图所示：

image-20221028111135194

根据提示的URL，在浏览器中打开，可以看到默认的页面：

image-20221028111252455

4. 关于Vue脚手架项目的端口

https://gitee.com/chengheng2022/jsd2207-csmall-web-client-teacher.git

启动Vue脚手架项目时，默认会尝试使用8080端口，如果此端口已经被占用，则会改为尝试使用8081端口，如果仍被占用，当会继续顺延。

为了避免每次启动时端口不一样，甚至如果先启动前端项目再启动后端项目，还会导致后端项目启动失败，强烈推荐显式的为前端项目和后端项目分别指定不同的端口号！

在后端项目（jsd2207-csmall-product）中，在application-dev.yml中添加配置：

# 服务端口
server:
  port: 9080

在前端项目jsd2207-csmall-web-client中，在package.json文件中，将原有的在scripts下的serve的值由原本的"vue-cli-service serve改为"vue-cli-service serve --port 9000"，例如：

image-20221028113223083

提示：前端项目启动后，没有停止按钮可用，需要在启动此项目的终端窗口中通过Ctrl + C来停止项目。

5. 关于视图组件

Vue框架自身支持热部署

Vue脚手架项目是一个单页面的应用，即在整个项目中只有1个.html文件，此文件中的各个部分都是可以随时替换的，所以可以呈现出不同的显示效果，并且，Vue脚手架项目还会管理访问时的URL，即不同的显示效果可能对应不同的URL，以至于软件的使用者根本就体会不到这是个只有1个.html的项目。

在Vue脚手架项目中，以.vue为扩展名的文件称之为“视图组件”，将负责页面的显示，包括编写样式、JavaScript代码，一定程度上，与传统项目中的.html文件的作用是相似的。

在.vue文件中，主要由3部分组成：

  • <template>：用于设计页面元素，即页面需要显示什么
    • 注意：此标签必须有且仅有1个直接子标签
  • <style>：用于设计样式规则，即CSS
  • <script>：用于编写JavaScript程序

6. 默认的页面效果

新创建的Vue脚手架项目已经是可以运行的，其运行效果相关的常用文件有：

  • src/App.vue：是项目中唯一的.html文件默认绑定的视图组件，可理解为项目的入口视图组件，并且，此页面中设计的内容是始终显示的，在此视图中，有<router-view/>标签，此标签表示“将由其它视图组件来显示”
  • src/router/index.js：是默认的路由配置文件，此文件中的routes常量配置了路径与视图组件的对应关系，决定了<router-view/>标签将由哪个视图组件来显示
    • 关于routes的配置：此属性是数组类型的，其中的各元素通常称之为一个个的“路由对象”，每个路由对象中主要配置path和component属性，即配置路径与视图组件的对应关系，关于component属性，如果某个视图是类似“主页”的定位，推荐通过import语句导入，否则，其它视图推荐使用import()函数导入

7. Vue脚手架项目的结构

  • [.idea]：是通过IntelliJ IDEA编辑项目时，由IntelliJ IDEA创建的文件夹，不需要人为干预
  • [node_modules]：当前项目的依赖项文件夹，不应该人为干预，需要注意：在使用Git等管理工具时，通常并不会将此文件夹提交到Git服务器，从Git服务器下载得到的项目也不会包含此文件夹及内容，如果没有这个文件夹，则项目无法编译、运行！可以通过执行npm install命令安装项目所需的依赖项，并且，此命令可以反复执行，例如项目并不是没有任何依赖项，而只是缺失其中一部分依赖项，也是通过此命令来安装各依赖项的
  • [public]：静态资源文件夹，此文件夹下的内容是可以直接被访问的，不会经过项目的编译过程，通常，会在此文件夹下存放：.css文件、.js文件、图片文件等
    • favicon.ico：当前网站的图标文件，此文件是固定文件名的
    • index.html：当前项目中仅有的唯一.html文件
  • [src]：项目的源代码的文件夹
    • [assets]：静态资源文件夹，与public文件夹不同，此处的静态资源应该是不随程序运行而变化的
    • [componets]：被其它视图导入、调用的视图组件的文件夹
    • [router]：路由配置文件的文件夹
      • index.js：默认的路由配置文件
    • [store]：存储全局的量的文件所在的文件夹
      • index.js：默认的存储全局的量的文件
    • [views]：视图组件文件夹
    • App.vue：直接绑定到了index.html的视图组件
    • main.js：项目的主配置文件
  • .gitignore：用于配置“提交Git时忽略哪些文件、文件夹”
  • babel.config.js：暂不关心
  • jsconfig.json：暂不关心
  • LICENSE：作为Git的开源项目应该包含“许可协议”，此文件就是“许可协议”文件
  • package.json：当前项目的配置文件，类似Maven项目中的pom.xml文件，在不熟悉此文件时，不建议手动修改文件中的任何内容
  • package-lock.json：锁定的当前项目的配置文件，此文件不允许手动编辑，即使编辑了，后续也会自动还原成原本的样子，甚至，当你删除此文件后，后续也会自动重新生成此文件
  • README.md：默认的用于介绍当前项目的文件
  • vue.config.js：暂不关心

VUE的使用

vue的使用

  • 准备好视图组件的文件，可以是新创建的文件，也可以使用现在的文件进行修改
  • 在src/router/index.js中，确保已经配置此文件的路由
  • 在src/App.vue中，在页面设计部分，只保留<router-view/>，删除其它代码

1. 嵌套路由

在设计前端的视图组件时，如果根级视图（通过是App.vue）使用了<router-view/>，则表示相关区域将由另一个视图组件来显示，而“另一个视图组件”中也使用了<router-view/>，就会出现<router-view>的嵌套，则需要在src/router/index.js中配置嵌套路由。

在src/router/index.js中配置路由对象时，如果对应的视图包含<router-view/>，则此路由对象应该配置children属性，此属性的配置方式与routes常量完全相同，即children属性的值类型也是数组类型，且数组元素都是一个个的路由对象，需要配置path和component属性，例如：

const routes = [
  {
    path: '/',
    component: HomeView,
    children: [
      {
        path: '/about',
        component: () => import('../views/AboutView.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('../views/LoginView.vue')
  }
]

VUE中添加背景图片

https://blog.csdn.net/Bakertt/article/details/123854700

div居中

 <div style="width: 600px; margin: 180px auto; padding: 30px 50px;">

VUE整合axios

网页客户端向服务器端提交请求，并获取响应结果，可以先在客户端项目中安装axios：

npm i axios -S

然后，在main.js中添加配置：

import axios from 'axios';

Vue.prototype.axios = axios;

至此，当前项目中任何视图组件都可以通过this.axios来使用axios。

Vue 整合Element UI

在Vue脚手架项目中，当需要使用Element UI时，需要事先安装并配置。

npm i element-ui -S

注意：如果从Git上拉取老师的代码，需要再次执行npm install命令！

在main.js中添加配置：

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

el-card 实现透明效果

<el-card id="card"></el-card>
#card{
  border: 1px solid transparent;
  border-radius: 15px;
  background-color: rgba(255,255,255,0.1);
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.2);
}

VUE整合qs

qs是一款可以将对象格式的数据转换成FormData格式的框架。

首先，需要安装qs：

npm i qs -S

然后，在main.js中添加配置：

import qs from 'qs';
Vue.prototype.qs = qs;

在项目中，当需要将对象转换为FormData格式时，例如：

let formData = this.qs.stringify(this.ruleForm);

VUE整合wangeditor富文本

本次使用的富文本编辑器是wangeditor，需要先在项目中安装此富文本编辑器：

npm i wangeditor -S

然后，需要在main.js中配置：

import wangEditor from 'wangeditor';
Vue.prototype.wangEditor = wangEditor;

在需要使用富文本编辑器的视图中，先在视图的设计中，使用某个标签来表示需要显示富文本编辑器的区域，通常，使用<div>标签即可，后续，富文本编辑器将会显示在这个<div>内部，例如：

<el-form-item label="商品详情">
	<div id="wangEditor"></div>
</el-form-item>

然后，在data中声明对应的属性：

export default {
  data() {
    return {
      editor: {}, // 富文本编辑器
      // 省略不相关代码

并且，准备一个用于初始化富文本编辑器的函数：

initWangEditor() {
  this.editor = new this.wangEditor('#wangEditor');
  this.editor.create();
},

最后，在视图刚刚加载时，就调用此初始化函数：

mounted() {
    this.initWangEditor(); // 初始化富文本编辑器
    // 省略不相关代码
}
最近更新：:
Contributors: yanpeng_