Vue

Vue

1.创建vue脚手架

1.安装vue-cli
npm install -g vue-cli
2.卸载脚手架
npm uninstall -g @vue/cli // 卸载3.xx版本脚手架
npm uninstall -g vue-cli // 卸载2.xx版本脚手架
3.vue Cli官方网站
https://cli.vuejs.org/zh/guide/

4.创建vue脚手架项目
vue init webpack 项目名
输入可以勾选route(√)
		  vuex(√)   

2.vue结构

-build ----------> 项目名
-config ----------> 用来做整个项目的配置目录
-node-modules ----------> 用来管理项目中使用的依赖
-src ----------> 用来书写vue的源代码（重点）
   +assets ----------> 用来存放静态资源（重点）
   +components ----------> 用来书写vue组件（重点）
   +router ----------> 用来配置项目中的路由（重点）
   +App.vue ----------> 项目中的根组件（重点）
   +main.js ----------> 项目中的主入口（重点）
-static ----------> 其它静态资源
-.babelrc ----------> 将es6语法转为es5运行
-.editorconfig ----------> 项目编辑配置
-.gitignore ----------> git版本控制忽略文件
-.postcssrc.js ----------> 源码相关js
-index.html ----------> 项目主页
-packge.json ----------> 类似于java中的pom.xml依赖管理（可以通过命令引入jquery...）
-packge-lock.json ----------> 对packge.json加锁
-README ----------> 项目说明文件

3.运行vue项目

1.npm run serve ----------> 运行2.xx版本
2.npm run dev ----------> 运行3.xx版本

3.Vue Cli中项目开发方式
注意：
1).一切皆组件，一个组件中包含了 ==> js，css，html
2).VueCli开发方式是在项目中开发一个组件对应一个业务功能模块，日后可以将多个组件合并到一起形成一个前端系统
3).日后在使用Vue Cli进行开发时不再书写html，编写的是一个组件，日后打包时vue cli会将组件编译成运行的html文件

4.vue脚手架使用步骤

1. 创建一个vue，用export暴露该vue

2. 去index.js中注册该vue路由

3. 在App.vue中提供跳转链接（此时的App.vue就是根组件，相当于App.vue就是我们打开一个网站第一眼看到的界面，或者它就是整个网页的首页。首页当然还有很多子页面，那些子页面就是App.vue下的子组件。这些子组件又是一个个页面，这些页面可能也还有子组件，它相对于它们的子组件来说又是一个根组件，无限套娃，以此类推）

注意：
1.展示这个页面路由下面的子路由必须用<router-view></router-view>
2.如果不想组件注册路由又要在别的组件展示，可以在别的组件中通过import注入进来，然后在components中注册该组件，然后就可以使用<注册组件名></注册组件名>来展示

4.1.vue的两种传参方式

1.通过在路径后面拼接参数的方式
	1.1.先在路由中定义地址 (index.js)

	1.2.在data中获取userId (Login.vue)
        data(){
            return{
				userId: '1001'
            }
        }
	1.3.最后在跳转链接中拼接userId，注意要用v-bind才能获取到data中的数据 (Login.vue)
		<router-link :to="'/login/' + userId">
	1.4.也可以在login取到参数数据
		<h1>{{ $route.params.id }}</h1>

2.通过query的方式
	1.1.在路径中增加一个query属性，里面放的是data中存放的userInfo对象 (App.vue)
		<router-link :to="{ path: '/login/', query: userInfo }
	2.2.data中存放的userInfo数据 (App.vue)
        data(){
            return{
                userInfo: {
                name: '张三'
                age: '18'
                }
            }
		}
	2.3.也可以在login取到参数数据
		<h1>{{ $route.query }}</h1>

3.push中传id的方式
this.$router.push('/user/expressframe/confirmbill/' + id)

5.在脚手架中使用axios

1.安装axios
npm install axios --save -dev
    
2.配置main.js中引入axios
import axios from 'axios'
Vue.prototype.$http=axios
    
3.使用axios
在需要发送异步请求的位置：
$http.get("url").then((resp) => {})
    
this.$router.push('/'); // 切换路由

5.1.axios传参

1.通过?传参

axios.get('/toData?id=1')

2.通过url传参

axios.get('/toData/1')

3.通过参数传参

// 第一种形式是把参数绑定在data()中
data(){
	return{
        params: {
        id: 1,
        name: 'zyf',
        sex: '男'
      }
   };
}
created(){
	axios.get('/toData', this.params)    
}

axios.get('/toData',{params:{id:1}})

4.通过请求体传参

// 第一种形式是把参数绑定在data()中
data(){
	return{
        params: {
            id: 1,
            name: 'zyf',
            sex: '男'
      	}
   	};
}
created(){
	axios.post('/toData', this.params)    
}

5.2.axios传参的第二种方式

axios({
	url: '/toData'
	type: 'get'
	params: {id:1}
}).then(function (res) {
    console.log(res.data);
 })

6.Vue Cli脚手架项目打包和部署

1.在项目根目录中执行如下命令
vue run build 
注意：vue脚手架打包的项目必须在服务器上运行不能直接双击运行
    
2.打包之后当前项目中的变化
在打包之后项目中出现dist目录，该目录就是vue脚手架项目生产目录或者说是直接部署目录
    
3.将dist目录拷贝放到java项目的static目录下，然后启动后端服务
    这边有一点需要注意：
    index.html中各种路径默认是：/static/.../...
    如果有配置前后文路径则改为：前后文路径/dist/static/.../...

7.在脚手架中使用axios

1.安装axios
npm install axios -S
2.在main.js中引入
import axios from "axios";
Vue.prototype.$http = axios;
3.使用的时候采用$http代替axios
this.$http.get/post('url').then((resp) => {})