安装nodejs
- 官网：https://nodejs.org/en/download/
- 安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack
cnpm install webpack -g
安装vue-cli
- 安装：
cnpm install --global vue-cli - 升级到3.0：
cnpm i -g @vue/cli
创建elementUI工程
vue create my-appcd my-appvue add element
完整引入element
在main.js中写入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
Vue-router的配置
- router.js文件的配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
//配置 根路由，还可以使用redirect
{path: '/',redirect:'/home'},
// 配置 首页 路由
{path: '/home',name: 'home', component: () => import('./views/Home.vue')},
//配置 关于我们 路由
{path: '/about',/* name: 'about', */ component: () => import('./views/About.vue')}
]
})
- 路由的使用
在template标签中加入<router-link to="home">首页</router-link> <router-link to="/about">关于我们</router-link> - 我把路由出口配置在了App.vue中
component组件的使用
- 在components文件夹下面，新增写组件的vue文件
- 在使用的时候引入
import TopNav from '@/components/TopNav.vue'
这里的@是/src的写法 - 在export default中注册组件
components: {TopNav} - 在template标签中放入组件的标签
<TopNav></TopNav>
vue-axios基本用法
- 安装vue-axios：
npm install vue-axios --save - 安装qs.js：
npm install qs.js --save能把json格式的直接转成data所需的格式（还没用到） - 引入
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs //全局注册，使用方法为:this.qs
- 开始使用
<script>
export default{
data(){
return{
userId:666,
token:'',
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:this.qs.stringify({ //这里是发送给后台的数据
userId:this.userId,
token:this.token,
})
}).then((response) =>{ //这里使用了ES6的语法
this.token=response;
console.log(response) //请求成功返回的数据
}).catch((error) =>{
console.log(error) //请求失败返回的数据
})
}
}
</script>
v-for的使用
用到的方法：
<tr v-for="(book,index) in bookNames" :key=book.bid>
<td> {{ index + "-" +book.bid + "-" + book.bookname }} </td>
</tr>
