vue-cli2升级vue-cli3（只是vue脚手架的3版本不是vue3.0）
vue-cli2安装步骤
npm install--global vue-cli \ cnpm install--global vue-cli
使用步骤
vue init webpack-simple vuedemo1 (推荐) \ vue init webpack vuedemo2
cd vuedemo1 \ cd vuedemo2
cnpm install \ npm install
npm run dev
vue-cli3安装步骤
安装步骤
npm uninstall vue-cli -g \ yarn global remove vue-cli (用于卸载原来的vue-cli2)
npm install -g @vue/cli \ yarn global add @vue/cli (安装vue-cli3)
vue -v （查看vue-cli版本）
创建步骤
vue create vuedemo
运行：npm run server \ yarn start
编译：npm run build \ yarn
vue-cli3图形化界面创建项目
vue ui
跳转到对应的浏览器路径之后自行创建
项目各个文件详解
-src
-assets //放置全局公用的样式、图片、字体
-components //公共组件部分
-pages //页面级组件
-App.vue //入口文件
-main.js //全局样式或者js导入的文件
-.babelrc //babel的配置文件
-.editorconfig //编辑器的配置文件
-.gitignore //git的配置文件
-index.html //HTML的入口文件，移动端视口需要更改
-package.json //创建项目的开发环境的配置和生产环境的配置
-webpack.config.js //webpack 的配置文件 可以自行更改端口等等
vue文件详解
<template>
<div id="app">
<p> {{msg}}</p>
<br>
<p> {{obj.name}}</p>
<br>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<br> //循环
<ul>
<li v-for="item in list1">
{{item.title}}
</li>
</ul>
<br>
<div :class={red:flag}>//绑定class
flag为true我为红色，否则我为默认颜色
</div>
</div>
</template>
<script>
export default{
el: '#app', //获取所要使用的区域****
name:'app', //用于给组件配置一个名称（可写可不写）
data(){/*业务逻辑里面定义的数据*/
return{
flag:'true',
msg:'你好vue',
boj:{
name:'张三'
},
list:['1','2','3'],
list1:[
{'title':'111'},
{'title':'222'},
{'title':'333'},
{'title':'444'},
]
}
},
methods:{/*写js方法的地方*/
submitHandle(){
console.log("提交了")
}
}，
router, //传入组件
components: {}, //方法表示一个具体的操作，主要书写业务逻辑
computed: {}, //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
watch: {}, //一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体
// ----------------------------------------------------------------------------------------------------------
beforCreate() {
//生命周期函数之一,表示实例完全创造之前会执行它
},
create() {
//这是第二个生命周期函数,在create中data和methods都已经被初始化好了
//如果要使用data和methods中的数据和方法,最早也只能在create中调用
},
beforeMount() {
//这是第三个生命周期,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中
//在beforMount中执行的时候,页面中的元素还没有被替换过来,只是尚未替换的字符串,例如:{{msg}}
},
mounted() {
//这是第四个生命周期,表示,内存中的模板已经真是的挂在到页面中,用户已经可以看到渲染好的页面了
//例如在beforeMount中看到的是{{msg}},在mounted中可以是:你好!!
// 注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表明实例已经完全被创建好了
// 此时,若没有其他操作的话,这个实例,就静静的躺在内存中一动不动
},
// 以上四个生命周期函数指的是vue组件实例的四个生命周期函数
// ----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------------
// 接下来的是运行 中的两个事件:只有当data数据发生改变时才能出发以下两个事件
beforeUpdate() {
//当执行beforUpdata的时候，页面中显示的数据是改变之前的数据，此时页面中的数据是新的，但是它尚未和页面同步，就是前一步操作
},
updated() {
//updated执行的时候页面和数据已经同步，都是最新的数据
},
// ----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------------------------------
beforeDsetory() {
//当执行beforeDsetory钩子函数的时候，vue实例就已经从运行阶段进入到了销毁及前端
//当执行beforeDsetory的时候，实例身上所有的data和所有methods，以及过滤器，指令……都处于可用状态
//此时，还没有真正执行销毁的过程
},
dsetoryed() {
//当执行dsetoryed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器……都已经不可用了
}
}
</script>
<style scoped="scoped">
.red{
color:red
}
</style>
vue属性
- v-bind --> : //绑定属性
- v-on --> @ //绑定方法
- v-html //绑定html标签
- v-text //绑定文本数据
vue请求数据
1、vue-resource(官方的请求数据的插件) 首先安装vue-resouce
yarn add vue-resource \ npm install vue-resource
使用方法：在main.js中引入
import VueResource from 'vue-resource'
Vue.use(VueResource)
在对应的组件中请求数据：
methods:{
getData(){
let api = 'https://...'
this.$http.get(api).then(res=>{
conse.log('成功')
}),,error=>{
conse.log('失败')
}
}
}
2、axios（第三方插件） 安装：
yarn add axios \npm install axios --save
在哪里用哪里引用
import Axios from 'axios'
methods:{
getData(){
let api = 'https://...'
Axios.get(api).then(res=>{
conse.log('成功')
}).catch(error=>{
conse.log('失败')
})
}
}
3、fetch的使用方法和axios相同
组件间的传值
父组件传值子组件
- 父组件调用子组件的时候，绑定动态属性如：
<Home :title="title"></Home>
- 在子组件中通过props接收父组件传过来的数据
props:{
'title'
}
- 然后在子组件中直接调用
父组件主动获取子组件中的数据和方法
- 第一步，调用子组件的时候定义一个ref
<Header ref="header"></Header>
- 第二步在父组件中调用ref
this.$refs.header
子组件主动获取父组件中的数据和方法
-直接通过
this.$parent.(父组件的数据或者方法)
非父子组件传值
通过bus.js来传值，在外部自定义一个位置创建一个bus.js,内容为：
import Vue from 'vue';
var Bus = new Vue();
export default VueEvent;
在需要的组件中引入:首先需要暴露数据的组件代码
<template>
<div>
//传值组件
<button @click="emitNews">
给别人传值
</button>
</div>
</template>
<script>
import Bus from './Bus'
export default {
data:{
return{
msg:'123'
}
},
methods:{
emitNews(){
Bus.$emit('to-news',this.msg) //第一个参数是名字，随便取，第二个为要传出去的数据
}
}
}
</script>
<template>
<div>
//接收组件
</div>
</template>
<script>
import Bus from './Bus'
export default {
mounted:{
//$emit为开放数据，$on为接收数据
Bus.$on('to-news',data=>{
console.log(data)
})
}
}
</script>
VUE路由
vue-router安装步骤：
yarn add vue-router \ npm install vue-router --save
然后在main.js中引入：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
配置路由：
- 创建组件，然后引入组件
- 定义路由
const routes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
- 实例化VueRouter
const router = new VueRouter({
routes
})
- 挂载，在根组件中挂载路由
new Vue({
el:'#app',
router
})
动态路由
const routes=[
{path:'/foo',component:Foo},
{path:'/bar/:aid',component:Bar} //aid就是动态跳转的路径参数
]
此时就可以在Bar组件中获取动态路由的值
mounted(){
console.log(this.$route.params) //获取动态路由传值
}
通过js跳转路由（编程式导航）
<template>
<div>
<button @click="goNews">通过js跳转</button>
</div>
</template>
<script>
export default {
methods:{
goNews(){
this.$router.push({
path:'/news'
})
}
}
}
</script>
通过history和hash模式跳转
//在实例化路由的时候更改模式
const router = new VueRouter({
mode:'history',//默认为hash模式
routes
})
路由嵌套
const routes=[
{path:'/foo',component:Foo},
{
path:'/bar',
component:Bar，
children:[
path:'/barson',
component:BarSon，
]
}
]
路由模块化： 在src下新建一个router文件，然后在里面建文件：router.js
//router.js中的代码例子
import Vue from "vue";
import Router from "vue-router";
import Home from "@/page/home/Home";
import Personal from "@/page/personal/Personal";
import Container from "@/page/container/Container";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/personal",
name: "personal",
component: Personal
},
{
path: "/container:id",
name: "container",
component: Container
}
]
});
//main.js代码例子
import Vue from 'vue'
import App from './App'
import router from './router'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,//导入路由
components: { App },
template: '<App/>'
})
VueX讲解
用于解决不同组件间的数据共享（数据持久化） --->非父子、兄弟组件 1、首先安装vuex
cnpm install vuex --save \ yarn add vuex
2、在src目录下新建一个store文件夹，并在里面建立store.js （vuex仓库）
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use.(Vuex);
/*
*state在vuex中表示存储数据
*/
var state ={
count：1
}
/*
*mutations里面放的是方法，方法主要用于改变state中的数据
*/
var mutations ={
inCount(){
++state.count;//这样count会自增
}
}
/*
*getters类似于计算属性（改变state数据的时候，会触发getters的方法，获取新的值）
*/
var getters ={
computedCount:(state)=>{
return state.count*2
}
}
/*
*action类似于mutations，不同在于：action提交的是mutations，而不是直接变更状态，action可以包含任意的异步操作
*/
var action ={
incMutations(context){//可以调用context.commit 提交一个 mutations
context.commit('inCount')//执行mutations中的inCount方法，进而改变count
}
}
//vuex
const store = new Vuex.Store({
state,
mutations,
getters,
action
})
export default store;//将vuex暴露出去
在需要使用到的组件中引入
<template>
<div>
/*
*第一个为vuex仓库中的数据，经过mutations中的方法每次加一
*第二个为vuex仓库中的getters的计算属性，state中的数据改变就会直接调用getters的方法，不需要想mutations中的方法一样要注册（基本没用）
*
*/
使用vuex中的数据 -- {{this.$store.state.count}} -- {{this.$store.getters.computedCount}}
<br />
//通过mutations中的方法改变
<button @click="inCount">改变vuex中state的数据</button>
</div>
</template>
<script>
//引入
import store from './store/store.js'//假设路径就是这样
//注册
export default{
data(){},
store,//注册了，和注册路由一个样
methods:{
inCount(){
//this.$store.commit('inCount');//获取store中的mutations的方法
this.$store.dispatch('incMutations');//通过action里的方法去调用mutation中的方法
}
}
...
}
</script>
