vue脚手架安装方法——2023年5月28日版本
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的基础操作就讲解完毕了，我相信到这里后，只要是你对前端有所了解的，几乎就可以说是能上手干活了，祝大家工作顺利。
腾讯云开发者
