一、什么是Vue CL
Vue CLI即Vue脚手架，是Vue.js开发的标准工具，通过Vue CLI组织管理基于Vue.js的项目开发，可以大大提高效率和应用的可维护性。
主要作用：目录结构、本地调试、代码部署、热加载、单元测试
二、安装Vue CLI
1．安装Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，其中包含NPM包管理工具。
NPM是世界上最大的软件注册表（软件数据库），每星期大约有 30 亿次的下载量，包含超过 600000 个包（package/代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴，使您能够轻松跟踪依赖项和版本。目前JavaScript各种组件多以NPM包的形式存储于NPM上。
安装Node.js后就可以通过自带的npm命令下载js软件包了
Node.js的下载地址为：
https://nodejs.org/dist/v12.16.2/node-v12.16.2-x64.msi ，下载后的安装过程与普通的windows软件是一样的。
2. vue-cli的具体使用步骤
1.安装node环境
2.使用npm安装cnpm 命令:npm install -g cnpm
3.安装vue-cli 命令:cnpm install -g @vue/cli | npm install -g @vue/cli
4.使用vue-cli创建一个vue项目
两种方式：
1.基于图形化界面方式
使用命令vue ui启动图形化界面
2.基于DOS命令方式(推荐)
进入项目的存放路径使用命令vue create 项目名创建项目
更具体的创建详细步骤有很多优秀的文章 咱也不重复造轮子， 可参考他人：如
https://blog.csdn.net/qq_35263273/article/details/86294010?ops_request_misc=&request_id=&biz_id=102&utm_term=vue-cli&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-5-86294010.first_rank_v2_pc_rank_v29
3. vue-cli文件夹及模块解释
一: vue-cli创建项目的目录结构
----------------------
1.src:核心目录，vue中视图、路由、核心控制器该目录下
1.1 views:视图目录，vue的相关视图会在该目录下
1.2 router:路由配置目录，关于路由配置的文件会放在该目录下
1.3 components:组件视图目录
1.4 assets:放静态资源目录
2.public:对外公开页面
3.node_modules:模块包，vue开发中所要使用到的模块都在该文件夹下，如：
axios模块、sweetalert2模块、elementui模块。。。
----------------------
二: vue-cli的核心文件
1.main.js:该文件为vue的核心配置文件，在该文件进行全局配置
2.router/index.js:该文件是vue的路由配置文件，项目中的相关视图的
路由配置都在该文件中
3.App.vue:vue的主视图(界面)
4.public/index.html:该文件是vue-cli项目的主界面文件也是唯一一个html页面
----------------------
三: VUE推荐单页面开发，整个应用只有一个网页(index.html),vue通过路由选择将不同的视图(vue)添加到
index.html页面中显示
----------------------
四: 在VUE-CLI中一个一个的vue视图通过App.vue插入到index.html页面中显示
实现前后端连接
前端:
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
//导入axios 通过axios进行数据传输
import axios from "axios";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//显示你生产模式的消息
Vue.config.productionTip = false;
Vue.use(ElementUI);
//将axios注册为Vue的一个原型属性 baseURL设置哪个地址的后端可访问
Vue.prototype.$axios =axios.create({
baseURL: 'http://localhost/',
headers: {
'X-Custom-Header': 'XMLHttpRequest'},//设置请求头
withCredentials: true //跨域证书
});
new Vue({
router,
render: h => h(App)
}).$mount("#app");
Home.vue
<template>
<div id="goodsApp">
.....省略了 这不是本片主要内容
<div class="goods-list">
</div>
</div>
</template>
<script>
export default{
data() {
//数据区
return {
goodsList: [],//goods数组
/*分页数据*/
pageParams: {
//分页参数对象
pageSize: 10,//每页显示记录数
pageNum: 1//当前页
}
}
},
methods: {
//方法区
/**
* 获取商品列表方法
*/
getGoodsList() {
this.$axios.get('goods/getGoodsList', {
params: this.pageParams})
.then(response => {
//当请求和响应正常时执行
//将服务端响应的数据设置到goodsList属性中
})
.catch(err => {
alert(err);
});
}
},
mounted() {
//方法执行区 加载之后自动执行获取商品方法
this.getGoodsList();
}
</script>
后台：
主配置类： WebAppConfig.class
/* 该注解包含以下三个注解:
* 1.@EnableAutoConfiguration:开启SpringBoot的自动配置功能
* 2.@ComponentScan:组件扫描注解,它会自动扫描当前配置类所在的包及其子包中的类
* 3.@Configuration:配置类注解
*/
@SpringBootApplication
@MapperScan("com.jiazhong.dao")
public class WebAppConfig {
/**该函数为SpringBoot的主函数，也是SpirngBoot项目的入口和启动器*/
public static void main(String[] args) {
SpringApplication.run(WebAppConfig.class);
}
/**------------------重-点-来-了----------------------
定义一个方法来改写写WebMvcConfigurer对像的addCorsMappings方法
最后交给spring进行管理
*/
@Bean
public WebMvcConfigurer webMvcConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry
.addMapping("/**")//当前项目的所有路径允许跨域访问
.allowCredentials(true)//允许使用凭证,允许使用session
.allowedMethods("*")//允许所有请求方式进行跨域访问GET/POST/PUT/DELETE/OPTIONS
.allowedOrigins("http://localhost:8080");//允许那个url路径进行跨域访问本项目
}
};
}
}
附加一丢vue的一点基本小使用
