使用 Vue CLI 创建 Vue 项目的详细步骤

本是古典何须时尚 2024-03-25 07:24 85阅读 0赞

使用 Vue CLI 创建 Vue 项目的详细步骤：

1.  首先需要安装 Node.js 和 npm，可以在官网下载并安装：[https://nodejs.org/en/][https_nodejs.org_en]

检查node，npm版本：

node -v

npm -v

![在这里插入图片描述][88745fd053e84ad7b990d7c0399a42ed.png]

1.  安装 Vue CLI，可以在终端（命令行）中输入以下命令进行安装：

npm install -g @vue/cli

检查vue版本命令：

vue -V

![在这里插入图片描述][3f4375479fad45f9a8d4c829b9072407.png]

1.  创建 Vue 项目，在终端中进入到项目要存放的文件夹，并输入以下命令：

vue create 项目名称

1.  接下来会出现一个交互式的选项界面，可以根据自己的需要进行选择。也可以直接按回车键，使用默认选项。  
    ![在这里插入图片描述][f2263984ea4d43a0ab4e43a3483ea044.png]  
    ![在这里插入图片描述][a005e8d5d0c64f4b987181ef669bddee.png]
2.  创建完毕后，在终端中进入项目所在的文件夹，并输入以下命令启动项目：

npm run serve

1.  打开浏览器，在地址栏中输入 http://localhost:8080 即可访问项目页面。

![在这里插入图片描述][3bd443644be54c26a618231367ce8e7e.png]

1.  改造一下项目，新建login页面  
    ![在这里插入图片描述][4540436f20184333a6561d93eb2c5b28.png]

login页面完整代码：

<template>
      <div class="login-container">
        <h1 class="title">登录</h1>
        <form class="login-form">
          <div class="form-group">
            <label class="form-label" for="username">用户名</label>
            <input
              class="form-control"
              type="text"
              id="username"
              name="username"
              v-model="username"
            />
          </div>
          <div class="form-group">
            <label class="form-label" for="password">密码</label>
            <input
              class="form-control"
              type="password"
              id="password"
              name="password"
              v-model="password"
            />
          </div>
          <button class="login-button" type="submit" @click.prevent="login">
            登录
          </button>
        </form>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          username: "",
          password: "",
        };
      },
      methods: {
        
        login() {
        
          // 在这里编写登录逻辑，例如向后端发送请求等
        },
      },
    };
    </script>
    
    <style scoped>
    .login-container {
        
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f8f8f8;
    }
    
    .title {
        
      text-align: center;
      margin-bottom: 20px;
    }
    
    .login-form {
        
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .form-group {
        
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-bottom: 20px;
    }
    
    .form-label {
        
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
    }
    
    .form-control {
        
      padding: 12px;
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      font-size: 16px;
    }
    
    .login-button {
        
      margin-top: 20px;
      padding: 12px 20px;
      background-color: #409eff;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .login-button:hover {
        
      background-color: #66b1ff;
    }
    </style>

1.  改造router----> index.ts  
    添加login页面的路由如下：

{
        
        path: "/login",
        name: "login",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/Login.vue"),
      }

1.  改造App.vue

![在这里插入图片描述][aed036a85ec742fbabdf356248976b28.png]  
最终效果：  
![在这里插入图片描述][a46434ed79a54d28b238d1d60e433e02.png]

~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~
    ~~~~~~~~~~~~~长得有点丑，勿喷~~~~~~~~~~~~~~

[https_nodejs.org_en]: https://nodejs.org/en/
[88745fd053e84ad7b990d7c0399a42ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/535e8748c0474c9e88a41fd1c0f1c0bd.png
[3f4375479fad45f9a8d4c829b9072407.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d94f82fcbd56424899af335c94e9eb39.png
[f2263984ea4d43a0ab4e43a3483ea044.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/72abea813ea3413c89d182620b67dbe0.png
[a005e8d5d0c64f4b987181ef669bddee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bc0992742001488b8987839c4b675b27.png
[3bd443644be54c26a618231367ce8e7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/192c83689ae14a8cb84110b8bd92bc41.png
[4540436f20184333a6561d93eb2c5b28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bdf5e5d1484342bead306896f8b2fb7f.png
[aed036a85ec742fbabdf356248976b28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6976fe5b5c534c74ac736f8490eb2a43.png
[a46434ed79a54d28b238d1d60e433e02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/670eb6743d3047c19456f13d68f0b3d4.png