vue脚手架(2022年9月份nodejs16.17.0版本)
目录
vue脚手架(2022年9月份nodejs16.17.0版本)
下载地址
环境变量设置
全局文件夹与缓存文件夹设置
修改国内的【阿里】镜像
查看vue信息
更新npm
新增环境变量
安装vue与router
安装vue脚手架
Vue项目创建
项目层级
demo示例
路由
案例测试1
axios
node最新版本的安装以及创建vue项目
下载地址
Index of /dist/v16.17.0/
直接下载16.17.0winx64.zip的压缩包即可
我下载的免安装版本，我这里有中文路径，所以我需要换一个没有中文路径的位置。剪切一下。
环境变量设置
换了一个没有中文路径的地方
配置一下环境变量，根据以下8个步骤配置即可。
查看一下是否可以使用
npm -v
全局文件夹与缓存文件夹设置
在当前文件夹下创建两个文件夹【node_global】与【node_cache】
直接鼠标右键【新建文件夹】即可
打开【cmd】修改配置位置：
我这里E盘，看好自己放置的位置就可以。
npm config set prefix "E:\exe\node-v16.17.0-win-x64\node_global"
npm config set cache "E:\exe\node-v16.17.0-win-x64\node_cache"
打开cmd进行设置即可
设置完毕，咱们再查看一下看看。
修改国内的【阿里】镜像
npm config set registry=http://registry.npm.taobao.org
npm config list
设置完毕后查看一下是否成功，这里查看后可以看到成功了。
可以通过以下命令直接查看镜像配置
npm config get registry
查看vue信息
npm info vue
当前是3.2.39，之前我安装过一个保姆级的版本是3.2.37，可以看到这才2个月升级了2个版本
更新npm
【-g】装到【global下】，就是刚才自己创建的文件夹。
npm install npm -g
新增环境变量
E:\exe\node-v16.17.0-win-x64\node_global\node_modules
查看一下版本是否升级
npm -v
安装vue与router
npm install vue -g
npm install vue-router -g
安装完成后可以在对应的文件夹下看到两个内容一个vue一个route。
安装vue脚手架
npm install vue-cli -g
安装提示
由于没有设置环境变量，暂时vue无法使用。这些命令都在【node_global】文件夹下。
我们需要再添加一个环境变量。
E:\exe\node-v16.17.0-win-x64\node_global
配置完成后查看vue命令是否可以使用。
vue -V
这里的版本还是2.9.6
Vue项目创建
特别备注：项目名称不允许使用数字开头，同时项目命中不允许出现大写字母。
vue init webpack vue01
我们找个空的位置来放置vue项目
连续输入以下命令
cd vue01
npm run dev
稍微等一下就能看到一下提示，可以直接通过提示进行访问。
访问效果：
以上整个内容代表vue脚手架安装成功。
这里咱们使用vscode来编辑vue项目
项目层级
装一个【vetur】插件，显示文本好看。
这回打开就能看到格式了：
demo示例
编码components下的HelloWorld.vue里面的template组件，可以与常规编码处理一样。
数据双向绑定效果
路由
<!-- 字符串 -->
<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>在router文件夹下可以看到有index.js，这是路由的配置文件，我们在components下创建vue的组件，然后注册到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 }
]
})
咱们的显示主页是App.vue所以我们把我们组件放进去。
<router-link to="/demo1">我是示例1</router-link>
<router-link to="/demo2">我是示例2</router-link>
<router-link to="/demo3">我是示例3</router-link>
访问的主页面
可以通过按钮切换路由
案例测试1
源码
<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>demo1示例
axios
import axios from 'axios'
引入后会发现cmd的服务文件报错了，要我们npm install --save axios来安装
npm install --save axios
我们需要先停止服务，先安装axios后再二次启动。【Ctrl+c】可以停止服务。
安装完成后启动vue
启动
npm run dev
在demo2中添加一个axios，我们做一个ajax示例，由于没有数据接口，所以我先做一个静态json文件用作访问。
[
{ "id": 3, "name": "巧荣女士", "introduce": "莫兰迪色小清新。" },
{ "id": 4, "name": "王语嫣", "introduce": "燕子坞学霸~" }
]
demo2示例编码
<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/info.json";
axios.get(url).then(
function(res) {
_this.list = res.data;
});
}
}
</script>访问效果：
接口的可以参考我之前写的
ASP.NET Core微服务(五)——【vue脚手架解析接口】_红目香薰的博客-CSDN博客
希望能持续创造更多的价值。
