实战 Vue 之从零开始搭建一个 Vue 项目

前言

写惯了 React，今天也来 Vue 尝尝鲜，本来以为我这老司机学新框架应该如鱼得水，没想到也踩了几个坑。今天就给大家分享一篇 Vue 的极简教程，从安装到入门，从指令的使用到接口的调取，再到路由配置，麻雀虽小五脏俱全，基本上涵盖了一个项目的核心配件，可将此作为脚手架运用到新项目中去。

一、环境搭建

模块化应用需要下载 node 和 npm 就不用赘述了吧。
主要安装以下4个模块。

1. 安装 @vue/cli

npm install @vue/cli -g

一定要全局安装，以便可以使用 vue 命令，注意查看 vue 版本是 vue -V，这里是大写的V。

2. 安装脚手架

全局安装了@vue/cli 模块之后，就可以使用 vue 命令。

vue create vue-demo

注意 vue-demo 是项目名称。

3. 安装路由模块

npm install vue-router

4. 安装 axios(调取接口的模块)

npm install axios

安装完成之后可以启动

npm run serve

二、Vue 初体验

1. 基本脚手架
   
   除了标红的这几个文件，其他都是脚手架命令直接下载下来的。现在一一说一下重点目录。
   vue-demo：项目根目录。
   node_modules：就不用说了吧，下载的所有模块包。
   public：存放 html 文件和 title 图标
   src：重点目录，用户自定义文件，assets 静态文件，如图片；components 自定义组件；router 新增的文件夹，index.js 文件用来配置路由；App.vue 主模块 ；main.js 节点挂载和创建路由实例。
2. 基本路由配置（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'
}

3. 挂载节点（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:'<App/>',
  components:{App}
})

4. 主入口（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>

5. 请求数据

    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);
            })
        }
    }

6. 基础指令

• 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>

三、学习总结

1. 先创建一个文件夹作为项目根路径，然后从编辑器打开，在控制台使用相关下载命令，但是 Vue 是先下载 @vue/cli，然后使用 vue 命令去下载项目，所以在运行( npm run serve)的时候记得要到下一层目录。
2. 在引入 Vue 的时候用这种形式，import Vue from ‘vue/dist/vue.js’，脚手架下下来的是 import Vue from ‘vue’。
3. 在 new 路由实例的时候，不是在配置路由路径的时候，比如如下的 route/index.js 中，而是在 main.js 中。
4. v-for 指令使用 index 索引应该是 v-for=(item,index) in items 而不是 v-for=(index,item) in items。看有的博客上就写成了这种。
5. 使用 v-bind 绑定 class ，内部是变量而不是 class 样式。比如 v-bind:class="[isTrue?active:noActive]" 中的 active 和 noActive 均为变量，而不是 class 名。
6. 在配置路由时，如果需要设置默认路由，可使用 redirect 重定向，请参考以上路由配置代码。