vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)
vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)
vue脚手架搭建2022年6月版本(保姆级)
1、Node.js环境安装
官网地址:【Node.js】 :
为了稳定，咱们下载：【16.15.1的版本】
等待一会下载。
清一色【Next】到最后安装：
点击【Finish】完成
可以在C盘下【C:\Program Files\nodejs】找到【node.exe】文件
2、Node.js环境配置
在【C:\Program Files\nodejs】位置上创建两个文件夹【node_global】与【node_cache】
打开【cmd】修改配置位置：
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"这里报错的【npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.】，您可以使用 –location=global Command 而不是 global –global，–local 已被弃用。
需要找到【npm】文件里面的prefix -g替换为prefix --location=global
不换也行，我是没换，如果有需要，可以自己换。
查看位置：
npm config list
3、修改国内的【阿里】镜像
npm config set registry=http://registry.npm.taobao.org再通过【npm config list】查询:
查看镜像是否OK
npm config get registry
确定配置完毕。
查看vue信息
npm info vue可以看到vue的3.2..37版本
4、更新npm
【-g】装到【global下】，就是刚才自己创建的文件夹。
npm install npm -g
5、环境变量配置：
增加环境变量NODE_PATH 内容是：【C:\Program Files\nodejs\node_global\node_modules】
C:\Program Files\nodejs\node_global\node_modules
6、安装vue与router
npm install vue -g这里的-g是指安装到global全局目录去，就是刚才配置的环境变量位置。
查看是否安装成功：
继续安装vue的路由器。
npm install vue-router -g
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包含了整套的增删改查，希望能对大家有所帮助。