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

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

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



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

相关文章
|
19小时前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
1天前
|
JavaScript
【vue】vue2 获取本地IP地址
【vue】vue2 获取本地IP地址
7 1
|
1天前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
9 1
|
1天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
15 3
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
978 0
|
2天前
|
JavaScript 前端开发
|
2天前
|
JavaScript
vue 组件注册
vue 组件注册
|
2天前
|
JavaScript 前端开发 开发者
|
2天前
|
JavaScript
vue 组件事件
vue 组件事件
|
2天前
|
自然语言处理 JavaScript 前端开发
vue 插槽(二)
vue 插槽(二)

相关实验场景

更多