vue脚手架安装方法——2023年5月28日版本
node下载
node版本采用的是最新的版本：
下载完直接解压
node环境变量配置
由于我们下载的是解压版本，所以直接配置环境即可。
打开我的电脑，属性，配置环境变量
按照以下步骤注意操作即可：
查看npm版本
npm -v
npm全局文件夹与缓存文件夹设置
在当前文件夹下创建两个文件夹【node_global】与【node_cache】
直接鼠标右键【新建文件夹】即可
打开【cmd】修改配置位置：
自己更换文件夹路径后执行即可。
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
通过这个命令可以直接查看是否是taobao的
npm config get registry
查看vue信息
npm info vue
我们就复制一下，其中的【-g】代表安装到全局的文件夹，也就是【D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global】我们配置的。
npm install -g npm@9.6.7
直接就升级到对应版本了。
安装VUE与路由
npm install vue -g npm install vue-router -g
在全局文件夹下的【node_modules】下就能看到我们刚安装的xue和vue的router了。
安装vue客户端
npm install vue-cli -g
虽然有异常提示，但是还是成功的安装了230个文件。
安装vue init
npm install -g @vue/cli-init
查看vue版本
vue -V
配置新环境变量
按照操作步骤操作即可
创建Vue项目
特别备注：项目名称不允许使用数字开头，同时项目命中不允许出现大写字母。
找个空文件夹来创建项目：
vue init webpack vue01
创建完成效果：
项目
启动Vue项目
cd vue01 npm run dev
有网路提示点允许啊。
服务cmd页面
通过vue服务路径访问
vue层级说明
源码目录
vetur插件安装
直接在拓展中搜索vetur第一个安装上即可。
Demo示例
<hr/> <input type="text" v-model="msg" placeholder="与msg双向绑定"/> <hr/>
测试效果：
Router路由
路由使用语法：
<!-- 字符串 --> <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>
路由实操：
在components下添加3个组件：【demo1.vue】、【demo2.vue】、【demo3.vue】
设置路由：
我们在【router】下的index.js中操作路由
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 } ] })
我们给三个demo都添加了路由。
在主页中加入超链接
<hr/> <router-link to="/demo1">我是demo1</router-link> <router-link to="/demo2">我是demo2</router-link> <router-link to="/demo3">我是demo3</router-link> <hr/>
添加文件是【App.vue】，直接穿插到中间即可，使用hr做了分割。
页面效果：
跳转效果：路径与内容相匹配，测试成功。
表格遍历测试demo3
将以下代码复制给demo3.vue文件。
<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>
直接复制给demo3.vue文件：
引入axios操作(相当于ajax)：
import axios from 'axios'
错误提示。
Ctrl+c停止服务，并按照提示要求执行命令。
重新启动：
npm run dev
axios示例：
数据准备。
[ { "id": 1, "name": "学习强国", "introduce": "人民有信仰" }, { "id": 2, "name": "强国强己", "introduce": "国强民必强" } ]
static静态路径访问测试：
http://localhost:8080/static/data.json
axios解析json文件：
替换下面的demo2.vue的所有代码
<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>
效果：
说明json解析完毕，没有任何异常。
到这里有关vue的基础操作就讲解完毕了，我相信到这里后，只要是你对前端有所了解的，几乎就可以说是能上手干活了，祝大家工作顺利。
