VUE项目实战

初始化项目

先安装vue脚手架工具

1、cmd中输入：

vue ui

浏览器自打开UI：
http://localhost:8001/project/select

2、选择文件夹，点击创建：

3、填写项目名称：

4、选择一个预设的或者是手动配置，这里 选择手动配置了：

5、选择安装的功能，这里选择了四个：


6、选择标准配置：

7、可以保存预设：

8、安装vue-cli-plugin-elment：

9、点击安装，之后选着按需导入：

10、安装axios：

11、点击启动：

项目访问地址：http://localhost:8080/#/

12、清空默认页面，修改app.vue:

<template>
  <div id="app">
    APP根组件
  </div>
</template>

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

<style>
</style>

13、清理路由，index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

14、删除views目录
15、删除components中的HelloWorld.vue
此刻的项目已经是干净的项目了。

登录页面

1、在components下面，创建Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {
    
}
</script>

<!-- scoped表示对该组件生效-->
<style lang="less" scoped>
    
</style>

2、在路由表中，添加两个路由，并导入登录组件

import Login from "../components/Login.vue"

const routes = [
  {
    path: "/",
    redirect: "/login"
  },
  {
    path: "/login",
    component: Login
  }
];

3、在APP.vue中，添加路由占位符

<template>
  <div id="app">
    <!-- 路由占位符-->
    <router-view></router-view>
  </div>
</template>

4、安装less-load和less

3、创建/assets/css/global.css文件

/** 全局样式表*/
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

在main.js导入该css：

import "./assets/css/global.css"

但是此时.login_container还没有撑满全屏:

.login_container{
    background: #2b4b6b;
    height: 100%;
}

让盒子居中：

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)

距离左50%，距离上50%，在坐标上往x轴左移自身的50%，向上移动自身的50%

通过命令安装element-ui:

npm i -S element-ui