vue的安装与使用

目录

安装vue

1.Node的安装

2.vue脚手架的安装

3.vue脚手架创建

怎么使用Visual来编辑呢？

vue怎么使用ui

---

安装vue

---

1.Node的安装

• 进入Node.js的官网下载

Node.js (nodejs.org)

---

下载好之后直接安装就行了

点击Next

同意协议，然后点击Next

记得选择安装位置

选择好安装位置之后点击Next

然后选择 Add to PATH  之后选择Next

选择Next

选择Install

等待安装完成

---

2.vue脚手架的安装

• 进入命令行 win+r 输入cmd即可

vue镜像在外国下载比较慢所以我们安装淘宝镜像，输入以下命令。

npm config set registry=http://registry.npm.taobao.org

这样就是安装好了，输入以下代码进行安装

npm install -g @vue/cli

这样就安装好了脚手架了，然后我们重新打开命令行。

3.vue脚手架创建

• 如果不确定是否安装成功输入 vue 来查看是否安装。

• 创建脚手架

为了创建的位置想要在自己创建的位置只要在要创建的位置打开命令行

在桌面创建一个文件夹

打开文件夹，然后在导航栏输入cmd打开命令行

回车

也可以cd到指定位置直接创建。

---

• 然后我们输入以下命令创建脚手架

vue create vue_test01

回车

然后等待创建完成，创建时间比较久所以要等待几分钟。

如果卡下面这个界面很久了没有跳转成功见面的话就直接打开安装好的位置

打开创建的位置

然后打开创建好的vue

在vue_test01导航栏输入cmd，打开命令行

回车

输入npm run serve打开vue_test01脚手架，这个方法也可以用于重复打开脚手架的。

npm run serve

• 然后复制Local和Network的链接就能进入脚手架了

在导航栏输入复制好的链接回车就可以进入脚手架的界面了

---

怎么使用Visual来编辑呢？

• 和html差不多的编辑方法的感觉

把vue文件用Visual打开

• 打开之后是和文本查看是差不多的所以为了更好的编辑我们需要安装两个插件

• Vetur用于更方便的查看代码的对错

Vetur

加入之后的感觉

• Vue Language Features (Volar)用于编译的

Vue Language Features (Volar)

添加好插件之后就可以进行vue脚手架的编辑了呢

vue怎么使用ui

• 在使用ui之前我们需要安装好ui的坏境 Element-UI，在我们创建好的vue_test01安装在vue_test01打开cmd

npm install element-ui

回车

安装好了，接着在你的Vue的入口文件(main.js或其他你使用的入口文件)引入Element-UI。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• 然后我们可以用以下代码实验ui是否引入成功

<template>

  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" label-width="80px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    handleLogin() {
      // 在这里编写处理登录逻辑的代码
      console.log("用户名：" + this.loginForm.username);
      console.log("密码：" + this.loginForm.password);
      // 在这里可以向后端发送登录请求，并根据返回结果进行相应的处理
    }
  }
};
</script>
<style>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  width: 400px;
}
</style>

• 记得写导航

然后我们试试

vun安装更加详细进入以下博文

https://blog.csdn.net/sinat_51673411/article/details/124240917