Vue-cli项目及Element UI 环境搭建 保姆级教程

一、Vue-cli介绍及其作用

什么是Vue-cli手脚架

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

它有什么作用

1、 统一的目录结构 2、本地调试 3、 热部署 4、单元测试 5、 集成打包上线

具体来说，

使用Vue-cli相比使用Vue原生，他可以更加 快速构建项目结构Vue CLI可以帮助你快速搭建一个Vue项目的基本结构，包括项目文件夹的组织、构建流程、配置文件等，省去了手动配置的繁琐过程。

Vue CLI集成了现代化的前端开发工具，比如Webpack、Babel等，可以帮助你进行模块化开发、代码转译、打包等工作，提高开发效率。

Vue CLI支持插件系统，可以根据项目需求选择安装和配置各种插件，扩展项目功能，提升开发体验。

Vue CLI提供了一个内置的开发服务器，支持热更新，可以在开发过程中实时预览页面效果。

Vue CLI内置了生产环境的优化配置，包括代码压缩、资源合并、懒加载等，帮助你更好地优化项目性能。

Vue-cli环境搭建及其使用

1、安装下载Node.js

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

下载网址：Node.js — 在任何地方运行 JavaScript (nodejs.org)

安装时会自动配置环境变量等，安装完成后可在控制台试运行nmp -v指令，如显示版本号证明安装成功

2、创建一个Vue-Cli项目

使用HBulider X 创建一个Vue-Cli项目

删除package-lock.json和/src/components目录
        

在scr目录下创建所需的组件（vue文件）

文件结构大致如下
	
	
 
	<script>
	// export 导出组件
		export default{
		//定义组件中的数据
			data(){
				return{
					
				}
			},
			methods:{
				
			}
	}
	script>
 
	<style>
	style>

在src下创建目录router,router文件夹内创建 index.js
1)注册（导入）组件

import Vue from 'vue';
			import router from 'vue-router'; /* 导入路由 */
			import Login from '../Login.vue';  /* 导入其他组件 */
			import Main from '../Main.vue';  /* 导入其他组件 */

2）定义路由组件
 

//定义路由组件
			var rout = new router({
			routes: [
					{
						path: '/',//最初界面
						component: Login
					},
					{
						path: '/login',//访问组件的地址 必须小写
						component: Login
					},
					{
						path: '/main',
						component: Main
					}
				]
			});

4)

//导出路由对象
			export default rout;

5）打开命令行工具，进入你的项目目录，输入命令npm i vue-router@3.5.3

（4）在main.js中配置路由

import router from './router/index.js'
	Vue.use(router);
	new Vue({
		el: '#app',
		router,
		render: h => h(App)
	})

ElementUI

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

环境配置

1、在控制台下载ElementUI
    npm i element-ui -S    
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({
  		el: '#app',
  		render: h => h(App)
	});
 

如果导入了其他的组件，将重复的代码删除
具体组件可以参考官网API

官网：Element - 网站快速成型工具