vue脚手架安装方法——2023年5月28日版本

npm -v

npm config set prefix "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global"
npm config set cache "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_cache"

npm config list

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

npm config get registry

npm info vue

npm install -g npm@9.6.7

npm install vue -g
npm install vue-router -g

npm install vue-cli -g

npm install -g @vue/cli-init

vue -V

vue init webpack vue01

cd vue01
npm run dev

    <hr/>
    <input type="text" v-model="msg" placeholder="与msg双向绑定"/>
    <hr/>

<!-- 字符串 -->
<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 demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)
 
export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        { path: '/demo1', name: 'demo1', component: demo1 },
        { path: '/demo2', name: 'demo2', component: demo2 },
        { path: '/demo3', name: 'demo3', component: demo3 }
    ]
})

<hr/>
<router-link to="/demo1">我是demo1</router-link>
<router-link to="/demo2">我是demo2</router-link>
<router-link to="/demo3">我是demo3</router-link>
<hr/>

<template>
    <div>
        <h1>组件路径Demo1</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>

import axios from 'axios'

npm run dev

[
    { "id": 1, "name": "学习强国", "introduce": "人民有信仰" },
    { "id": 2, "name": "强国强己", "introduce": "国强民必强" }
]

<template>
    <div>
        <h1>组件路径demo2</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/data.json";
        axios.get(url).then(
                function(res) {
                _this.list = res.data;
            });
    }
}
</script>
<style>
    table{
        width:100%;
        border-collapse: collapse;
    }
</style>