一、前言
写惯了 React,今天也来 Vue 尝尝鲜,本来以为我这老司机学新框架应该如鱼得水,没想到也踩了几个坑。今天就给大家分享一篇 Vue 的极简教程,从安装到入门,从指令的使用到接口的调取,再到路由配置,麻雀虽小五脏俱全,基本上涵盖了一个项目的核心配件,可以此作为脚手架运用到新项目中去。
二、安装
模块化应用需要下载 node 和 npm ,就不用赘述了吧。
主要安装以下4个模块。
安装 @vue/cli
npm install @vue/cli -g
一定要全局安装,以便可以使用 vue 命令,注意查看 vue 版本是 vue -V,这里是大写的V。
安装脚手架
全局安装了@vue/cli 模块之后,就可以使用 vue 命令。
vue create vue-demo
注意 vue-demo 是项目名称。
安装路由模块
npm install vue-router
安装 axios(调取接口的模块)
npm install axios
安装完成之后可以启动
npm run serve
三、入门
基本脚手架除了标红的这几个文件,其他都是脚手架命令直接下载下来的。现在一一说下重点目录。
vue-demo:项目根目录。
node_modules:就不用说了吧,下载的所有模块包。
public:存放 html 文件和 title 图标
src:重点目录,assets 静态文件,如图片;components 自定义组件;router 新增的文件夹,index.js 文件用来配置路由;App.vue 主模块 ;main.js 节点挂载和创建路由实例。路由配置(router/index.js)
import Index from '../components/Index';
import Detail from '../components/Detail';
export default {
routes:[{
path:'/',
redirect:'/index',
},{
path:'/index',
name:'index',
component:Index,
},{
path:'/detail',
name:'detail',
component:Detail,
}
],
mode:'history'
}
挂载节点(main.js)
import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import vueRouter from 'vue-router';
import routes from './router/index';
Vue.config.productionTip = false;
Vue.use(vueRouter);
var router = new vueRouter(routes);
new Vue({
el:'#app',
router,
template:'',
components:{App}
})
主入口(App.vue)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div v-on:click="goIndex">首页div>
<div v-on:click="goDetail">详情页div>
<router-view>router-view>
div>
template>
<script>
export default {
name: 'app',
methods:{
goIndex(){
this.$router.push({name:'index'});
},
goDetail(){
this.$router.push({name:'detail'});
}
}
}
script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
style>
请求数据
import axios from 'axios';
export default {
name: "Detail",
created() {
axios({method: 'post',url:'',data:{}}).then(res=>{
console.log(res.data);
}).catch(err=>{
console.log(err);
})
}
}
基础指令
v-on 绑定事件
<div v-on:click="goNext">提交div>
v-bind 绑定属性
<div v-bind:class="[isTrue?active:noActive]">提交div>
v-model 双向绑定
<div>{{msg}}div>
<input type="text" v-model='msg'>
v-for 循坏渲染
<div v-for=(item,index) in items>
{{item.title}}
div>
四、注意
注意点也就是我踩过的坑吧,大家在刚学的时候遇到坑点可以参考一下。
一般是先创建一个文件夹作为项目根路径,然后从编辑器打开,在控制台使用相关下载命令,但是 Vue 是先下载 @vue/cli,然后使用 vue 命令去下载项目,所以在运行( npm run serve)的时候记得要到下一层目录。
在引入 Vue 的时候用这种形式,import Vue from ‘vue/dist/vue.js’,脚手架下下来的是 import Vue from ‘vue’。
在 new 路由实例的时候,不是在配置路由路径的时候,比如如下的 route/index.js 中,而是在 main.js 中。
v-for 指令使用 index 索引应该是 v-for=(item,index) in items 而不是 v-for=(index,item) in items。看有的博客上就写成了这种。
使用 v-bind 绑定 class ,内部是变量而不是 class 样式。比如 v-bind: 中的 active 和 noActive 均为变量,而不是 class 名。
在配置路由时,如果需要设置默认路由,可使用 redirect 重定向,请参考以上路由配置代码。