Vue项目实战笔记 Day1：准备环境，搭建项目，登陆页面实现

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

1.前期准备

(1)nodejs下载安装。(略)安装完就可以使用npm命令。

(2)淘宝镜像加速器 cnpm

npm install cnpm -g
# 或者
npm install --registry = https://registry.npm.taobao.org

检验是否安装成功,显示版本号即为安装成功。

node -v
npm -v

(3)安装vue-cli 安装vue脚手架。

npm install -g @vue/cli
# 如何查看是否安装成功
vue --version

2.搭建项目

（1）创建项目第一步

可以使用powerShell启动。 首先选择自己合适的项目存储路径拷贝一下，然后在powerShell中输入cd，粘贴复制的路径，就跳转到项目存储路径，然后输入 vue create 项目名，就可以创建项目了。

cd 项目想要存储的路径
vue create 项目名

（2）可能会遇到的问题：

可能会出现 vue : 无法加载文件 C:\xxxx，因为在此系统上禁止运行脚本 ，只需要输入即可解决问题。

set-ExecutionPolicy RemoteSigned

（3）创建项目第二步

方向键上下，空格选中，回车下一步。

• 选择manually（手动选择）
• 选中Babel（用途ES6转ES5），Router
• 选择vue 2.0
• 选择hsitory n
• 选择配置信息存储位置，package.json
• 是否保存为目标 N 开始创建，等待一会就可以了。 最后的操作，打开项目：

cd 项目名
vue run serve

访问 http://localhost:8080/ 即可。

3.WebStorm打开项目

项目结构：

4.安装element-UI组件

（1）安装 在WebStorm Terminal窗口输入一下命令：

npm i element-ui -S

• i 是install缩写
• -S是 --save的缩写，主要是可以安装到正式环境里面。

（2） 配置项目使用 安装后还不能使用，需要配置一下。 更改main.js

import Vue from 'vue';
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
import App from './App.vue'; 

Vue.use(ElementUI); 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

以上代码便完成了 Element 的引入

5.登陆页面编写初步验证

1.清理App.vue,只保留如下

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

2.删除组件Home，About，HelloWorld 3.在views新建Login.vue,并且配置路由

<template>
  <div>
    Login
  </div>
</template>

<script>
export default {
  name: "Login.vue"
}
</script>

<style scoped>

</style>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
]

const router = new VueRouter({
  routes
})

export default router

4.配置UI启动

启动可能发生空白页面，记得F12打开console查看报错信息。 错误原因，在main.js没有添加：

import ElementUI from 'element-ui'; 

修改后页面出现Login字样。这证明现在配置正确，可以进行下一步。

6.登陆表单正式编写

<template>
  <div>
    <el-form ref="form" :model="loginForm" class="loginContainer">
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item>
        <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码"
                  style="width: 250px; margin-right: 5px"></el-input>
      </el-form-item>
      <img src="catpchaUrl" alt="">
      <el-checkbox v-model="checked" class="loginRememberMe">记住我</el-checkbox>
      <el-button type="primary" style="width: 100%">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login.vue",
  data() {
    return {
      catpchaUrl: '',
      checked: true,
      loginForm: {
        username: 'admin',
        password: '123',
        code: ''
      }
    }
  }
}
</script>

<style>
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  /*内边距*/
  margin:180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
  /*内边距*/
  margin:0px auto 40px auto;
  text-align: center;
}
.loginRememberMe{
  text-align: left;
  /*内边距*/
  margin:0px auto 15px auto;
}
</style>

7.登陆功能实现

<template>
  <div>
    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码"
                  style="width: 250px; margin-right: 5px"></el-input>
      </el-form-item>
      <img src="catpchaUrl" alt="">
      <el-checkbox v-model="checked" class="loginRememberMe">记住我</el-checkbox>
      <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login.vue",
  data() {
    return {
      catpchaUrl: '',
      checked: true,
      loginForm: {
        username: 'admin',
        password: '123',
        code: ''
      },
      //校验规则,对应el-form-item的prop
      rules: {
        username: [{required: true, message: "请输入用户名", trigger: 'blur'}],
        password: [{required: true, message: "请输入密码", trigger: 'blur'}],
        code: [{required: true, message: "请输入验证码", trigger: 'blur'}],
      }
    }
  },
  methods: {
    submitLogin() {
      //登录校验
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          // 错误提示
          this.$message({
            showClose: true,
            message: '请输入所有字段',
            type: 'error'
          });
          return false;
        }
      });

    }
  }
}
</script>

<style>
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  /*内边距*/
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  /*内边距*/
  margin: 0px auto 40px auto;
  text-align: center;
}

.loginRememberMe {
  text-align: left;
  /*内边距*/
  margin: 0px auto 15px auto;
}
</style>