vue-cli

vue create 文件名     //创建vue项目
npm run serve   //运行项目
npm run build  //打包文件，把vue项目打包压缩成原生文件，默认打包到dist文件夹内

html中如果不用v-for遍历数组直接使用插值语法时，data为数组会报错，建议使用对象，因为数剧还未渲染进去，找不到会报错
{{data.xx}}

使用v-for需要在后面加上  :key=“index”如

<p v-for=“(value,index) in data” :key=“index”>

在标签中加ref属性即可在函数中获取到该标签，并操作dom

<div ref=“a”></div>

js
this.$refs.a.$el

在src文件夹中的App.vue文件中写组件的html,js,css数据，默认情况下css是全局样式，给style标签添加一个scoped属性即可变为局部样式

添加子组件(如果使用router则不用此方法)
在父vue组件的script标签内写

import one(自定义组件名) from '组件路径'
export default{
  name:'app',
  data(){
    return {
        ……
     }
  },
  method:{
   ……
  },
  components:{  //子组件
        one:one
   }
}

public文件夹中index.html文件中只写html组件     <div id=“app”>


src文件夹中main.js文件中引入全局组件，并注册组件

import Vue from 'vue'  //等于引入vue.js文件
import App from './app.vue(组件文件路径)'
import router from './router'  //引入router路由模块
import store from './store'　　//引入vuex模块

new Vue({
    el:'#app',
    router,　　　　
    store,
    render:c=>c(App)    //组件替换
})

 

 

可以将组件封装为插件
封装成插件可以共用且传参

在src下创建一个文件夹plugin(插件)，在该文件夹下在创建一个组件文件夹，把组件a1.vue存放在该文件夹内，在建一个install.js文件

import Vue from 'vue'
import a1 from './a1.vue'

export default{　　//把组件导出
    install(){
         Vue.component('a1name',a1)
     }
}

//在src下的main.js把要install.js文件引入

import install from './plugin/install.js'

Vue.use(install)　　//在全局使用

//在任意组件标签中使用

<a1name></a1name>

 

 

在cli中使用vuex（需要先安装该模块，在创建vue项目时可以选择）

在store文件夹内新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
     state:{},  //data数据
     mutations:{},  //methods方法
     actions:{},
     modules:{}
})

 

在cli中使用router（需要先安装该模块，在创建vue项目时可以选择）

在router文件夹下的index.js下写

import Vue from 'vue'
import Router from 'vue-router'
import One(自定义子组件名) from '../components/One.vue'　　//要配置的组件

Vue.use(Router)

const routes=[
   {path:'/One',component:One},　　　　//配置路由为/One时跳转组件One处
   {path:'/',redirect:'/One'}　　　　//默认显示/One路由
]
export default new Router({
    router
})

在任意.vue文件下使用  router-link  标签

<div id="app">
   <router-link to="/One",tag="button"></router-link>
  <router-link to="/Two",tag="button"></router-link>
  <router-view></router-view>　　　　<!--路由组件显示区域-->
</div>

在方法中切换路由

this.$router.push('/user')

 

 

在vue-cli中使用axios（需要先安装该模块）
安装 

npm install axios --save-dev

在main.js中引入 

import axios from 'axios'
Vue.prototype.$axios=axios 

使用

//get请求
this.$axios.get('url？key=value').then((res)=>{

})
//post请求
this.$axios.post('url',{key:value}).then((res)=>{

})

 

 

 注册全局方法

　　要注册的方法  util.js

export function add(a,b){
     return a+b
}

　　在main.js中注册

import {add} from 'util/util.js'　　　　//使用export导出的数据需要用{x,x}方面引入模块

Vue.prototype.$add= add

　　在其他组件中使用

this.$add(1,1)