Vue-cli3安装及基本使用

题外话

Vue.js官方组件基础
前进不缓存,后退使用缓存参考博客: 0
KeepAlive使用详解: 0-1!!-2
export default 和 export 区别: 0
js在html中的加载执行顺序: 0-1
qs的使用: 0
echarts详细使用:0-1-在vue中的使用

js编译过程和顺序

由于js语言是由浏览器直接进行运行,所以不需要先转为中间件。js代码运行过程分为2部分，预编译和运行。预编译期间是对js代码块进行变量声明所有var变量，函数定义分配存储空间。每个js代码块按顺序执行。

安装cnpm使用国内npm包

npm install cnpm -g

曾经安装过vue,事前卸载

cnpm uninstall vue-cli -g // 卸载

1 全局安装vue-cli 2.0

cnpm install --global vue-cli

1.1 创建第一个vue2.0项目

1.2 启动一个2.0

cnpm run dev

全局安装vue-cli 3.0

cnpm install -g @vue/cli

创建第一个vue3.0项目

注意项目名称不能有大写

vue create myfirst_vue  

流程

参照流程页

npm install  // 加载配置文件中需要的依赖库
npm install axios 
npm install vue-router

3.0启动命令

cnpm run serve

axios的使用

axios详细用法
1. 局部安装axios

npm install axios -save
npm install qs  --save　　//这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式

2. main.js 引入axios模块

import axios from 'axios'
// vue全局注册axios
Vue.prototype.axios = axios;

axios.defaults.withCredentials=true;  // 用于跨域访问

3. axios使用

 methods:{
    btn: function () {
      this.axios.get("http://localhost:8081/hello").then(response =>{
        console.log(response.data)
      })
    }
}

4. axios多请求发送

btn3: function () {
      // this.axios.post("http://localhost:8081/postCookie",{name:"lili"}).then(response =>{
      //   console.log(response.data)
      // })
      alert("btn3()")

//this.axios.all([参数1,参数2],)  参数1和参数2 必须得为this.axios.get or post('url')方法
   this.axios.all([this.axios.get('http://localhost:8081/hello'),this.axios.get('http://localhost:8081/getCookie')]).then(this.axios.spread(function (ret1,ret2) {
        //this.axios.spread的2个参数ret1,ret2 分别为2个axios方法的返回值
        console.log("hello-result:"+ret1.data)
        console.log("getCookie-result:"+ret2.data)
      }))
    }

router的使用

router使用详情(扫盲篇)
router详解

1. 局部安装router

npm install vue-router -save

2. router.js文件引入vue-router

import Vue from "vue"
import VueRouter from "vue-router"  // 引入vue-router模块
Vue.use(VueRouter)      // 注册VueRouter插件
import demo1 from "@/components/demo1"  // 引入视图组件
import demo2 from "@/components/demo2"  // 引入视图组件
import demo3 from "@/components/demo3"  // 引入视图组件 子路由组件

import HelloWord from "@/components/HelloWorld.vue"  // 引入视图组件


/* 配置路由 */
const routes=[
    {name:"demo1",path:"/demo1/:id",component:demo1,props:true},  // props:true 允许接收父组件的参数,name 路由名称,path url路径, component 组件，children 设置子路由
    {name:"demo2",path:"/demo2",component:demo2},
    {name:"helloword",path:"/helloword",component:HelloWord,children:[
            {
                name:"helloword_child",
                path:"h_child",    // 子路由不能加 / 斜杆
                component:demo3
            }
        ]}

]

/* 创建路由对象 */
const router  = new VueRouter({
    routes,
    mode: 'history'    // 添加该项,路径中不会出现 # 符
})

export default router

demo3.vue

<template>
  <div class="hello">
    <h1>Demo3</h1>
  </div>
</template>

<script>
export default {
  name: "demo3",
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

HelloWorld.vue

<template>
  <div class="hello">
    <button @click="btn()">{{message}}</button>
    <button @click="btn1()">getCookie</button>
    <button @click="btn2()">post</button>
    <button @click="btn3()">postCookie</button>
    <router-link to="/helloword/h_child">h_child</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      message: "axios"
    }
  },
  methods:{
    btn: function () {
      this.axios.get("http://localhost:8081/hello").then(response =>{
        console.log(response.data)
      }).catch(error => console.log(error))
    },btn1: function () {
      this.axios.get("http://localhost:8081/getCookie").then(response =>{
        console.log(response.data)
      })
    },btn2: function () {
      this.axios.post("http://localhost:8081/post",{name:"lili"}).then(response =>{
        console.log(response.data)
      })
    },btn3: function () {
      this.axios.post("http://localhost:8081/postCookie",{name:"lili"}).then(response =>{
        console.log(response.data)
      })
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

3. main.js 全局配置router

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import router from "./router/router.js"

// vue全局注册axios
Vue.prototype.axios = axios;
// 允许接收跨域的cookie,和发送跨域cookie
axios.defaults.withCredentials=true;
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  router   // 配置router
}).$mount('#app')

4. 使用router

  <div id="app">
    <router-link to="/demo1/123">demo1</router-link>
    <router-link to="/demo2?id=321">demo2</router-link>
      <router-link to="/helloword">helloword</router-link>
      <!-- 视图展示 -->
    <router-view>
    </router-view>
  </div>

注意:若是嵌套路由需要从路由地址获取参数,无法使用用props[]进行参数传递。直接this.$route.params['id'] or this.$route.params.id 获取路径中的参数。 this.$route.query['id'] 获取表单参数 url?id=。

const routes=[
    {name:"demo1",path:"/demo1",component:demo1,children: [
            {
                name:"demo11",
                path:"/demo1/:id",
                component: demo1,
                props:true   // 嵌套路由无法从路径获取参数,
            }
        ]}
}

a通过js操作路由跳转

js操作路由参考博客 : https://blog.csdn.net/qi_dabin/article/details/82454588

this.$router.push({
     1    path:"/demo1/123",
          query:{
            name:"12341"
          }
       2  // name: "demo11",
          // params:{
          //   id:589,       // 使用该种方法,不会再路径中显示
          // }
        })

const routes=[
    {name:"demo1",path:"/demo1",component:demo1,children: [
            {
       1        name:"demo11",
                path:"/demo1/:id",
                component: demo1,
        2    // path:"/demo1/:",   该种方式不会再路径中显示id值
            }
        ]}
}

this.\$router 为全局router对象
this.\$route为当前路由对象

b在路由中设置元属性meta

const routes=[
    {name:"demo1",path:"/demo1",component:demo1,children: [
            {
                name:"demo11",
                path:"/demo1/:id",
                component: demo1,
                meta:{
                    keepAlive: true   // 可用于页面判断是使用缓存
                }
            }
        ]}
}
// 获取当前路由中元属性
<div>{{this.$route.meta.keepAlive}}</div>

标签作用

    <!-- 使用该标签表示: 标签以内的组件均被缓存 -->
    <keep-alive>
      <router-view v-if="this.$route.meta.keepAlive">
      </router-view>
    </keep-alive>
    <router-view v-if="!this.$route.meta.keepAlive">
    </router-view>

bootstrap,jquery在Vue中的使用

npm install bootstrap -save
npm install jquery -save
npm install popper.js -save

main.js中引入

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import qs from "qs"      // 能将json格式数据直接转换成data所需的格式 ???
import router from "./router/router.js"
import aaa from "./a.vue"


import "bootstrap/dist/css/bootstrap.min.css"   // 引入bootstrap.css单个
import $ from "jquery"                          // 引入jquery.js
import "bootstrap/dist/js/bootstrap.min"        // 引入bootstrap.js单个


// 设置a为Vue的全局属性
Vue.prototype.a = "123456"
// 允许接收跨域的cookie,和发送跨域cookie
axios.defaults.withCredentials=true;
// vue全局注册axios
Vue.prototype.axios = axios
Vue.prototype.qs = qs
Vue.config.productionTip = false



new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Echarts 在 Vue中的使用

cnpm install echarts -save

main.js

import Vue from 'vue'
import App from './App.vue'
import echarts from "echarts"   // 引入echarts模块

// 全局设置echarts
Vue.prototype.echarts = echarts

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')