vue created脚手架_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

三、入门

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:'',
  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: 中的 active 和 noActive 均为变量，而不是 class 名。

6. 在配置路由时，如果需要设置默认路由，可使用 redirect 重定向，请参考以上路由配置代码。