Vue脚手架项目构建
一 安装Vue CLI
Vue CLI是Vue框架的客户端工具，创建Vue项目、运行Vue项目都需要事先安装此工具。
安装Vue CLI的cmd命令:
npm install -g @vue/cli
以上命令执行完后，只要没有提示错误（Err或Error字样），即可视为成功!
当Vue CLI安装完成后，可以通过以下命令查看版本号并检查是否安装成功：
如果有的err话,关闭这个命令,在重新构建继续输入上面的命令,知道成功为止.
vue -V
二 创建项目
在命令提示符窗口中，执行
vue create 项目名称
的命令，就可以创建项目，创建出来的项目会在命令提示符窗口中提示的位置（即：敲命令时左侧提示的位置）
创建:
vue create xxxxx
注意
:执行以上命令后，会有一点卡顿，此时不要反复按回车，接下来，需要选择创建选项，分别是：
Manually select features
Babel / Vuex / Router //(用空格尽行选择)
2.x
直接回车
In package.json
直接回车
当创建完成后，可以使用IntelliJ IDEA打开此项目，并且，在IntelliJ IDEA的Terminal（终端）面板中，可以执行启动项目的命令：
npm run serve
三 关于Vue脚手架项目
Vue脚手架项目是一个
单页面
的应用，即整个项目中只有1个html页面，它认为这个页面是由若干个视图组合而成的，每个视图都只是该页面中的一个部分，并且，都是可以被替换的！
项目的文件夹结构：
-
[.idea]
：仅当使用IntelliJ IDEA打开此项目后，才会有这个文件夹，是IntelliJ IDEA管理项目时使用的，无需关注此文件 -
[node_modules]
：此项目中使用的各个库的文件，注意：通常，提交到GIT的项目代码中并不包含此文件夹，需要先执行
npm install
命令，则会自动下载此项目中的各个库的文件，然后才可以运行项目 -
[public]
：此项目的静态资源文件夹，通常用于存放图片、自行编写的js、自行编写的css等文件，此文件夹下的资源的访问路径都是根路径 -
public/favicon.ico
：此项目的图标文件，此文件必须在这个位置，且必须是这个文件名 -
public/index.html
：此项目中唯一的html文件，也是项目打开页面的入口 -
[src]
：源文件的文件夹 -
[src/assets]
：资源文件夹，此处的资源文件应该是不随程序运行而发生变化的 -
[src/components]
：视图组件文件夹，此文件夹下的视图组件通常是被视为封装的视图，且将会被其它视图调用 -
[src/router]
：此项目中配置路径的文件所在的文件夹 -
src/router/index.js
：默认的路由配置文件 -
[src/stroe]
：此项目的配置全局共享变量的文件所在的文件夹 -
src/store/index.js
：默认的配置全局共享变量的文件，此处声明的变量，在任何一个视图组件中均可使用 -
[views]
：一般的视图组件所在的文件夹 -
src/App.vue
：默认绑定到
index.html
中的
<div id="app"></div>
的视图组件，可简单理解为页面的入口，此视图组件不需要配置路由，默认就会显示 -
src/main.js
：此项目的主配置文件，通常，在项目中安装了软件之后，都需要在此文件中补充配置 -
.gitignore
：使用GIT时的忽略文件清单，即：用于配置哪些文件不会提交到Git -
package.json
：项目的配置文件，例如配置了此项目的依赖项等 -
package-lock.json
：锁定的配置文件，不需要，也不建议手动修改此文件中的任何内容
四 关于视图组件
在Vue脚手架项目中，以
.vue
为作文件名后缀的，就是视图组件！
在视图组件中，源代码主要有3个部分：
-
<template>
：设计界面的源代码部分，此标签下可以使用HTML或相关技术（例如Element UI）来设计界面-
注意：在
<template>
标签下，只能有1个直接子标签！
-
-
<script>
：编写JavaScript代码 -
<style>
：编写CSS代码
在设计界面时，可以使用
<router-view/>
表示此视图组件不确定的内容！例如在
App.vue
中就使用了这个标签，此标签将显示的内容取决于URL（地址栏中的网址）。
五 路由
在Vue脚手架项目中，使用“路由”来配置URL与视图组件的对应关系。
通过
src/router/index.js
可以配置路由。
核心代码
是：
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
以上配置中，
path
表示路径，
name
表示名称，可以不必配置，
component
表示视图组件。
关于
component
的值，可以使用
静态导入
的方式来确定，例如
HomeView
，也可以使用
import()
函数导入，例如以上关于
/about
的配置。
- 通常，在每个项目中，只有1个视图组件是静态导入的。
六 安装Element UI
在终端中执行以下命令安装Element UI：
npm i element-ui -S //注意S大写
安装完成后，需要在
src/main.js
中添加配置：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
至此，在项目中的任何一个视图组件中都可以直接使用Element UI，不需要额外的声明或引用！
七 关于跨域问题
默认情况下，不允许向别的服务提交异步请求，例如，在
http://localhost:9000
服务上，向
http://localhost:8080
提交异步请求，这是不允许的！
在基于Spring Boot的项目中，要允许跨域访问，可以在启动类上实现
WebMvcConfigurer
接口，并重写
addCorsMappings()
方法：
@ServletComponentScan
@SpringBootApplication
public class CoolsharkApplication implements WebMvcConfigurer {
public static void main(String[] args) {
SpringApplication.run(CoolsharkApplication.class, args);
}
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedHeaders("*")
.allowedMethods("*")
.allowedOriginPatterns("*")
.maxAge(3600);
}
}
.allowedHeaders("*")
.allowedMethods("*")
.allowedOriginPatterns("*")
.maxAge(3600);
}
}