7、安装vue脚手架
运行命令：
npm install vue-cli -g
由于没有设置环境变量，无法使用。
添加系统path的环境变量，路径是【C:\Program Files\nodejs\node_global】
直接添加保存即可。
8、Vue项目创建
特别备注：项目名称不允许使用数字开头，同时项目命中不允许出现大写字母。
vue init webpack vue01
选择【npm】哦：
国内镜像还是很快的，才30s
通过提示的内容启动vue。
cd vue01 npm run dev
9、项目访问与目录层级介绍
访问路径：【http://localhost:8080】
恭喜，搭建成功。可以通过【VS Code】打开看看。
刚才那句话就是修改了主页面入口的【index.html】文件。
装一个【vetur】插件，显示文本好看。
10、路由
路由写法：
<!-- 字符串 --> <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 }, ] })
【APP.vue】
<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>
【a.vue/b.vue/c.vue】
<template> <div> <h1>组件路径A</h1> </div> </template>
<template> <div> <h1>组件路径B</h1> </div> </template>
<template> <div> <h1>组件路径C</h1> </div> </template>
访问测试:【http://localhost:8080/#/】按钮的ABC可以切换路径
11、简单使用
在【a.vue】内测试
<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的写法类似的，都能用，但是这个不是咱们要的。
12、axios
需要引入内容：【import axios from 'axios'】
import axios from 'axios'
引入就报错。 需要下载【axios】
根据提示内容下载【npm install --save axios】
下载完重新启动：
在【b.vue】中测试
<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>
缺少读取的【./static/info.json】需要在【static】文件夹中添加一个【info.json】
[ {"id":3,"name":"巧荣女士","introduce":"莫兰迪色小清新。"}, {"id":4,"name":"王语嫣","introduce":"燕子坞学霸~"} ]
json文件是可以直接通过服务访问的：【http://localhost:8080/static/info.json】
访问一下B组件看看效果：【http://localhost:8080/#/b】
访问成功，axios解析json成功。解析接口也是一样的操作。
我有一个.net接口的案例，可以参考一下：
https://laoshifu.blog.csdn.net/article/details/113762115
包含了整套的增删改查，希望能对大家有所帮助。
