Vue 搭建一个前端项目

ゞ浴缸里的玫瑰 2022-12-05 15:16 213阅读 0赞

#### 一、前言 ####

之前图省事，都是在html中引入`Vue.js`的CDN来使用Vue开发网站项目，其实正确的做法应该是使用Vue构建一个完整的项目，进而进行前后端分离的开发。

#### 二、让我们开始吧！ ####

##### 1 node环境安装 #####

从 node官网下载`node.js`

[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]

##### 2 安装vue-cli #####

npm  install vue-cli -g

##### 3 新建项目 #####

vue init webpack vue-project

一路yes！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center]

cd vue-project  
    npm run dev

![在这里插入图片描述][20200911084717107.png_pic_center]  
项目启动… 输入localhost:8080 进行访问…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 2]  
可以看到Vue的目录结构…

#### 安装element-ui ####

element-ui是饿了么团队开发的Vue组件库，也就是加速开发的轮子。

官方文档地址为:[https://element.eleme.cn/2.3/\#/zh-CN/guide/design][https_element.eleme.cn_2.3_zh-CN_guide_design]

**NPM 安装**  
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 3]

**CDN**  
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

在安装完成Element-UI后，我们需要在项目中引入它  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 4]  
也就是如下

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

#### 编写登录界面 ####

我们在src目录下创建`views`目录，用于存储我们的界面，并创建登录界面`Login.vue`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_left]  
Login.vue内容

<template>
      <div class="login-container">
        <el-form :model="ruleForm2" :rules="rules2"
                 status-icon
                 ref="ruleForm2"
                 label-position="left"
                 label-width="0px"
                 class="demo-ruleForm login-page">
          <h3 class="title">系统登录</h3>
          <el-form-item prop="username">
            <el-input type="text"
                      v-model="ruleForm2.username"
                      auto-complete="off"
                      placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password"
                      v-model="ruleForm2.password"
                      auto-complete="off"
                      placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-checkbox
            v-model="checked"
            class="rememberme"
          >记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
         
      data () {
         
        return {
         
          logining: false,
          ruleForm2: {
         
            username: 'admin',
            password: '123456'
          },
          rules2: {
         
            username: [{
         required: true, message: 'please enter your account', trigger: 'blur'}],
            password: [{
         required: true, message: 'enter your password', trigger: 'blur'}]
          },
          checked: false
        }
      },
      methods: {
         
        handleSubmit (event) {
         
          this.$refs.ruleForm2.validate((valid) => {
         
            if (valid) {
         
              this.logining = true
              if (this.ruleForm2.username === 'admin' &&
                  this.ruleForm2.password === '123456') {
         
                this.logining = false
                sessionStorage.setItem('user', this.ruleForm2.username)
                this.$router.push({
         path: '/'})
              } else {
         
                this.logining = false
                this.$alert('username or password wrong!', 'info', {
         
                  confirmButtonText: 'ok'
                })
              }
            } else {
         
              console.log('error submit!')
              return false
            }
          })
        }
      }
    }
    </script>
    
    <style scoped>
      .login-container {
         
        width: 100%;
        height: 100%;
      }
      .login-page {
         
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
      }
      label.el-checkbox.rememberme {
         
        margin: 0px 0px 15px;
        text-align: left;
      }
    </style>

我们只是构建了页面，还需要将Login界面放进路由中…

修改`index.js`，配置路由…

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Login from '@/views/Login'
    
    Vue.use(Router)
    
    export default new Router({
        
      routes: [
        {
        
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
        
          path: '/Login',
          name: 'Login',
          component: Login
        }
      ]
    })

#### 启动 ####

访问登录界面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 5]  
至此一个Vue项目搭建完成…

#### 参考 ####

[vue+elementui搭建后台管理界面(1登录)][vue_elementui_1]  
[Element-UI 文档][Element-UI]  
[Vue 文档][Vue]

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ab096ec27260439587ce4ab73108c6c0.png
[20200911084717107.png_pic_center]: /images/20221123/50be78b08a1f432c919da9192b83fa64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/f82cd49df9214cc28fe2505321be43cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/3a389be054674faea818eb7d3ffe1f09.png
[https_element.eleme.cn_2.3_zh-CN_guide_design]: https://element.eleme.cn/2.3/#/zh-CN/guide/design
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/4c2551cebb8546768e3675284398810f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/f7b721b193b74f46b280fb5f47418c88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/5cd736b90b544fba9e2dda62edd97c77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4OTg0MQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/b43142f020624ed48863093b3946b0b4.png
[vue_elementui_1]: https://www.cnblogs.com/wbjxxzx/p/9942648.html
[Element-UI]: https://element.eleme.cn/2.3/#/zh-CN/component/quickstart
[Vue]: https://cn.vuejs.org/