vue-cli搭建过程，elementUI搭建使用过程

vue-cli

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义
好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。

主要功能

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

需要的环境

Node.js

简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。

npm
npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。

下载地址

https://nodejs.org/en/download

下载成功后输入以下指令进行测试

这样就算安装成功，如果你的npm下载组件有问题建议换成华为的镜像源输入以下指令即可

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

使用HbuilderX搭建一个vue-cli项目

创建一个这样的项目，创建成功后在命令行窗口启动项目

输入命令npm run serve

启动成功后,会出现访问项目地址:http://127.0.0.1:8080/
在命令行中 ctrl+c 停止服务

也可以右键项目选择外部命令里面的npm run serve

 

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建
单页面应用变得易如反掌。

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

搭建步骤

1.创建router目录

创建 index.js 文件,在其中配置路由

import Vue from 'vue';
import router from 'vue-router';

// 导入其他组件
import login from '../login.vue';
import Main from '../Main.vue';

Vue.use(router);
var rout = new router({
routes: [
	{
		// 网页打开直接访问这个组件，component后面的名字必须与导入的组件名字相同
	path:'/',
		component:login
	},
{
	path:'/login',
	component:login
},
{
	path:'/Main',
	component:Main
}
]
});
// 导出组件
export default rout;

组件都是.vue文件，有两个组件

<!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同 
  内容都写在一个template标签中,
  template标签必须有一个根标签
-->
<template>
	 <div class="login_container">
	     <!-- 登录盒子-->
	     <div class="login_box">
	          <!-- 头像盒子-->
	          <div class="img_box">
	                <img src="./assets/logo.png" />
	          </div>
			  <!-- 登录表单-->
			  <div style="margin-top: 100px;padding-right: 20px;">
				  <el-form ref="form"  label-width="80px">
					   <el-form-item label="账号">
					      <el-input v-model="account" ></el-input>
					    </el-form-item>
						<el-form-item label="密码">
						   <el-input v-model="password" show-password></el-input>
						</el-form-item>
						<el-form-item>
						    <el-button type="primary" @click="login()">登录</el-button>
						    <el-button>取消</el-button>
						  </el-form-item>
				  </el-form>
			  </div>
	     </div>
	  </div>
</template>

<script>
/* 导出组件,并为组件定义数据,函数,生命周期函数 */
 export default{
	 data(){
		 return{
			 account:"",
			 password:""
		 }
	 },
	 methods:{
		 login(){
			 //前端验证账号和密码不能为空
			 if(this.account.length==0){
				  this.$message({ message: '账号不能为空!',type: 'warning'});
				  return;
			 }
			 if(this.password.length==0){
			 		 this.$message({ message: '密码不能为空!',type: 'warning'});
			 		 return;
			 }
			 //与后端交互
			 
			 //后端向应一个结果
			 this.$router.push("/main");
		 }
	 }
 }
</script>

<style>
  .login_container{
    height: 100vh;
    margin: 0px;
    padding: 0px;
	background-image: url(assets/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
  }

    .login_box{
      width: 450px;
      height: 350px;
      background-color: #fff;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
	  opacity: 0.95;
    }

    .img_box{
       width: 130px;
       height: 130px;
       position: absolute;
       left: 50%;
       transform: translate(-50%,-50%);
       background-color: #fff;
       border-radius: 50%;
       padding: 5px;
       border: 1px solid #eee;
    }
    
    .img_box img{
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background-color: #eee;
     }
</style>

<template>
	<div>
		
		登录成功
	</div>
</template>

<script>
</script>

<style>
</style>

2.在Main.js配备路由

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 引入组件
import router from './router/index.js'
Vue.use(router);
//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

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

 3.使用路由(App.vue)

<template>
  <div id="app">
    <!-- 显示组件 -->
	<router-view></router-view>
  </div>
</template>

<script>


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

<style>
#app {

}
</style>

elementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库.

安装elementUI

执行下面代码下载elementUI

npm i element-ui -S

在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');