小白自学：脚手架搭建vue2+ElementUI

在以下创建vue项目之前，前提准备是nodeJS以及npm，多留意本地安装的node版本以及npm版本，因为有些操作在不同版本的兼容性并不相同，可以留意package.json文件中各个依赖的版本

• Vue脚手架安装

  • npm install -g @vue/cli
    # 以上这个命令有可能会报错，试着清除缓存，然后重新安装
    清除缓存：npm cache clean --force
    建议使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.prg
    

• cd进入项目文件夹，使用cli命令创建项目

  • vue create xxx
    

• 运行项目

  • npm run serve
    

• 安装vue-router

  • vue add router
    

• 安装elementUI

  • vue add element
    # 以上安装有可能会失败，导致nmp run serve失败，请尝试删除node-modules文件夹，重新使用npm install或者cnpm install命令生成依赖
    

<!-- Login.vue -->

<template>
    <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名:" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="pwd">
            <el-input v-model="form.pwd" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="sub()">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username: '',
                    pwd: ''
                },
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'change'
                    }]
                }
            }

        },
        methods: {
            sub() {
                console.log(this.form)
            }
        }
    }
</script>

<!--router index.js-->

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

<!--App.vue-->
<template>
  <div id="app">
      <a href="login">Login</a> |
      <a href="about">About</a>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>