目录
VUE框架
-
VUE框架是目前最流行的前端框架之一, 是基于MVVM设计模式的框架
-
此框架在第三阶段中接触到的是一个js文件, 使用此框架时只需要将此文件引入到自己的页面中即可, 第四个阶段会接触脚手架方式使用VUE
-
引入VUE框架的地址:
-
如何加载CDN服务器上面的js文件
-
把CDN服务器上的js文件下载到本地是如何加载
-
VUE框架的运行原理:
Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动
VUE相关指令
-
{{变量}}: 插值, 让此处的文本内容和变量进行绑定
-
v-text="变量": 让元素的文本内容和变量进行绑定
-
v-model="变量",双向绑定,主要用在各种控件中, 变量的值会影响控件的值, 控件的值也会影响变量的值
-
v-else 作用是和v-if状态取反
频繁切换显示状态时使用
Vue脚手架
1. Vue脚手架
Vue脚手架是一个开发基于Vue框架的前端项目的软件。
Vue脚手架的项目是“单页面”的，也就是在这样的项目，只有1个HTML页面，它认为页面是由多个模块组成的，各个模块都是可以随时替换的，从而显示出不同的页面效果。
2. 关于Node.js
首先,需要安装Node.js软件，下载得到安装后直接安装即可，安装过程中没有需要特别关注的部分。
安装完成后，可以通过npm -v命令查看安装的npm软件的版本，顺便检查是否安装成功。
npm -v以上安装Node.js主要是为了使用npm(Node Package Management)，通常，应该修改“npm源”，以使得其下载软件将从配置的站点进行下载：
npm config set registry https://registry.npm.taobao.org执行以上命令默认没有任何反馈，可以通过以下命令查看配置的值：
npm config get registry3. 安装Vue CLI
Vue脚手架软件称之为：Vue CLI
通过npm命令可以安装此软件：
npm install -g @vue/cli以上安装过程可能会提示WARN字样，可以无视，只要以上命令可以正常执行结束，并没有任何ERR字样的提示，即为成功！
安装Vue CLI主要是为了创建项目并管理项目(例如启动项目)。
4. 创建项目
首先，准备用于存放Vue脚手架项目的文件夹（任何你找得到的地方，不推荐操作系统的敏感文件夹），并且，在命令提示符窗口（或者终端窗口）中进入此文件夹。
然后，通过vue命令（来自前一步安装的@vue/cli）来创建项目，命令的基本格式是vue create 项目名称，例如：
vue create jsd2205-web-client注意：执行创建项目的命令后，可能会有一点卡顿，此时不可以反复按回车键！
注意：如果创建项目的过程中选择错误，可以通过按下CTRL + C终止，并重新创建！
在创建选项中，需要选择”
-
Manually select features：手动选择功能 -
Babel/Vuex/Router -
2.x -
Y -
In package.json -
N
接下来，会自动完成项目的创建，在创建结束后，如果信息中没有错误，且出现了Successfully created project 项目名称.的字样，则创建成功！
如果创建项目失败，应该先删除已经创建的项目的文件夹，然后检查npm源，确认无误后，再次执行vue create 项目名称命令来重新创建项目。
5. 启动项目
当项目创建成功后，可以通过IntelliJ IDEA打开此项目。
在IntelliJ IDEA中，打开Terminal窗口，默认的提示符的位置应该就是当前项目的文件夹，在此处执行命令即可启动项目：
npm run serve当启动成功后，可以看到Compiled successfully in 7859ms字样。
提示：启动成功后，会提示访问此项目的URL，例如：http://localhost:8080，根据当前计算机的网络配置不同，接下来的其它URL提示可能不同，均可无视。
在浏览器中，可以通过http://localhost:8080来访问此项目。
6. 关于视图文件
在Vue CLI项目中，默认的视图文件（页面文件）在src/views文件夹中。默认的项目中，负责显示的是：
-
src/App.vue -
src/views/AboutView.vue -
src/views/HomeView.vue -
src/components/HelloWorld.vue
每个视图文件都是以.vue作为扩展名的，每个文件都可以有3个根标签：
-
<script>：【可选】用于编写JavaScript代码
7. 关于路由
Vue CLI的“路由”是一种配置了“访问路径”与“视图组件”的对应关系的对象！
路由是通过src/router/index.js文件的routes常量进行配置的，默认的代码是：
const routes = [
{
path: '/about',
name: 'home',
component: HomeView
},
{
path: '/',
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/AdminIndexView.vue')
}
]
以上routes常量的类型是数组，数组的元素是一个个的对象，以上代码中各对象配置了：
-
path：访问路径 -
name：名称，并不是必须的 -
component：视图组件，配置此属性时，视图组件有2种加载模式，分别是“预加载”和“懒加载”，其中，预加载需要通过当前文件顶部的import语句导入视图，而懒加载则是直接配置此属性时，直接使用箭头函数加上import函数进行配置即可，通常，在每个项目中，应该有且仅有1个视图是预加载的
8. 关于<router-view>
在设计视图时，使用<router-view>则表示：当前视图文件（例如默认的App.vue）不处理此部分的显示，将根据访问路径来决定由哪个视图进行显示（取决于src/router/index.js中routes常量的配置）！
9. 关于Vue CLI项目的目录结构
-
[node_modules]：当前项目的依赖项（各依赖的框架、工具包对应的文件，类似于Maven所需的本地仓库），注意：通常，从GIT等位置获取的项目，将没有此文件夹及相关文件，则项目不可以直接运行！需要先执行npm install以安装当前项目必须的软件，才可以执行npm run serve来启动项目！ -
package.json：当前项目的配置文件，在此文件中，典型的配置包含：项目中的依赖项，例如，当执行npm install时，将根据此文件中的配置来决定下载哪些软件
10. 关于启动、停止、重启项目
在项目文件夹下，通过npm run serve即可启动项目：
npm run serve如果项目已经启动，当需要停止时，在启动项目的终端窗口中按下CTRL + C即可停止项目！
提示：当按下CTRL + C后，将提示“终止批处理操作吗(Y/N)?”，其实，此处无论选择Y或N，效果都是一样的！在按下CTRL + C的那一刻，项目就已经停止运行了！
此项目没有直接“重启”的操作，只能停止后再次运行！
11. 在Vue CLI中安装Element UI
首先，在终端窗口中，在当前项目的文件夹下，执行安装命令：
npm i element-ui -S经过以上操作后，会下载element ui相关的文件到本项目的node_modules文件夹中！
注意：如果你此前已经从GIT拉取了老师的项目，并执行过npm install，再次拉取添加了element ui的项目后，需要再次执行npm install，否则，老师的项目将缺少element ui相关的文件，将不可以正常启动！
接下来，需要在项目的主配置文件（src/main.js）中添加配置：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);12. Vue CLI中的嵌套路由
通常，在设计视图时，在App.vue中不会设计页面元素，只是添加一个<router-view/>即可！
在其它的视图中，设计的目标效果中可能存在多“页面”中相同的部分，反之，也可以理解为“某个页面的某个区域（不同的部分）是动态变化的”，则对应的区域（某个页面中会变化的部分）就可以设计为<router-view/>，同时，由于当前视图本身也是显示在App.vue设计的<router-view/>中的，就出现了“嵌套路由”！
当项目中多个视图中都使用到了<router-view/>时，某个视图组件到底显示在哪个<router-view/>，取决于路由的配置：
-
如果某个视图的路由配置在
src/router/index.js的routes常量中，则此视图将显示在App.vue的<router-view/>中const routes = [ { path: '/', component: HomeView }, // 以下AboutView将显示在App.vue的<router-view/>中 { path: '/about', component: () => import('../views/AboutView.vue') } ]; -
如果某个视图的路由配置在
src/router/index.js的routes常量中的某个路由配置的子级，则此视图将显示在其父级路由的视图中const routes = [ { path: '/', component: HomeView, // 以下AboutView将显示在HomeView的<router-view/>中 children: [ { path: '/about', component: () => import('../views/AdminIndexView.vue') } ] } ];
13. Vue CLI项目的启动端口
Vue CLI项目在启动时，默认将尝试占用8080端口，如果此端口已经被占用，则会顺延后一位端口号，即尝试占用8081……当然，如果8081也被占用，则会继续顺延至8082，以此类推。
建议为Vue CLI项目显式的指定端口，避免发生冲突，或多次启动时的端口号不一致。需要在package.json，原本有（通常在第6行）：
"serve": "vue-cli-service serve","serve": "vue-cli-service serve --port 8888",14. 在Vue CLI项目中使用axios
首先，需要安装axios：
npm i axios -S然后，需要在main.js中导入，并声明为Vue对象的成员：
import axios from 'axios';
Vue.prototype.axios = axios;15. 关于跨域访问
默认情况下，不允许执行跨域访问（从某一台服务器向另一台服务器发起异步请求），如果出现跨域访问，在浏览器的错误提示大致如下：
Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
在基于Spring Boot开发的服务器端项目中，添加一个Spring MVC的配置类即可允许跨域访问！
可以让Spring Boot项目的启动类实现WebMvcConfigurer接口，并在此类中添加以下代码：
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedHeaders("*")
.allowedMethods("*")
.allowCredentials(true)
.maxAge(3600);
}完成后，重启服务器端项目，然后，使用客户端再次发出请求，此请求可以正常发出（浏览器不会报告错误），且服务器端可以接收到请求参数。
原文地址：https://www.jb51.cc/wenti/3286125.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
