vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

npm config list

npm config set registry=http://registry.npm.taobao.org

npm config get registry

npm info vue

npm install npm -g

C:\Program Files\nodejs\node_global\node_modules

npm install vue -g

npm install vue-router -g

npm install vue-cli -g

vue init webpack vue01

cd vue01
npm run dev

<!-- 字符串 -->
<router-link to="/home">Home</router-link>

<!-- 渲染结果 -->
<a href="/home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="{ path: '/home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '9527' }}">User</router-link>

<!-- 有查询参数，下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import a from '@/components/a'
import b from '@/components/b'
import c from '@/components/c'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {      path: '/a',      name: 'a',      component: a    },
    {      path: '/b',      name: 'b',      component: b    },
    {      path: '/c',      name: 'c',      component: c    },
  ]
})

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <router-link to="/a">A</router-link>
    <router-link to="/b">B</router-link>
    <router-link to="/c">C</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

<template>
    <div>
        <h1>组件路径A</h1>
    </div>
</template>

<template>
    <div>
        <h1>组件路径B</h1>
    </div>
</template>

<template>
    <div>
        <h1>组件路径C</h1>
    </div>
</template>

<template>
    <div>
        <h1>组件路径A</h1>
         <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>简介</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.introduce}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
     data(){
          return {
                  list:[
         {id:1,name:"秋兰姑娘",introduce:"兰花"},
         {id:2,name:"海棠姑娘",introduce:"海棠花"}
       ]
          }
      }
}
</script>
<style>
    table{
         width:100%;text-align:center;
    }
</style>

发现这里的用法是和纯js的写法类似的，都能用，但是这个不是咱们要的。 

import axios from 'axios'

<template>
    <div>
        <h1>组件路径B</h1>
         <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>简介</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.introduce}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:""
        }
    },created:function(){
        var _this = this;
        var url = "./static/info.json";
        axios.get(url).then(
                function(res) {
                _this.list = res.data;
            });
    }
}
</script>

[
    {"id":3,"name":"巧荣女士","introduce":"莫兰迪色小清新。"},
    {"id":4,"name":"王语嫣","introduce":"燕子坞学霸~"}
]

https://laoshifu.blog.csdn.net/article/details/113762115