vue脚手架安装方法——2023年5月28日版本

举报
红目香薰 发表于 2023/05/29 00:17:14 2023/05/29
【摘要】 vue脚手架安装方法——2023年5月28日版本 node下载 node环境变量配置 npm全局文件夹与缓存文件夹设置 修改国内的【阿里】镜像 查看vue信息 安装VUE与路由 安装vue客户端 安装vue init 查看vue版本 配置新环境变量 创建Vue项目 启动Vue项目 通过vue服务路径访问 vue层级说明 源码目录 vetur插件安装

 

vue脚手架安装方法——2023年5月28日版本

目录

node下载

node环境变量配置

npm全局文件夹与缓存文件夹设置

修改国内的【阿里】镜像

查看vue信息

安装VUE与路由

安装vue客户端

安装vue init

查看vue版本

配置新环境变量

创建Vue项目

启动Vue项目

通过vue服务路径访问

vue层级说明

源码目录

vetur插件安装

​编辑

Demo示例

Router路由

路由使用语法:

路由实操:

设置路由:

表格遍历测试demo3

引入axios操作(相当于ajax):

axios示例:

axios解析json文件:



node下载

node版本采用的是最新的版本:

Index of /dist/latest-v20.x/

下载完直接解压


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服务路径访问

访问成功:http://localhost:8080/

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的基础操作就讲解完毕了,我相信到这里后,只要是你对前端有所了解的,几乎就可以说是能上手干活了,祝大家工作顺利。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。