创建vue-cli（脚手架搭建）

目录

功能

需要的环境

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

组件路由

element-ui

---

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

功能

 统一的目录结构  本地调试  热部署  单元测试  集成打包上线

需要的环境

简单的说 Node.js 就是运行在服务端的 JavaScript。

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。

下载 | Node.js 中文网http://nodejs.cn/download/

如果成功安装输入node -v和npm -v显示以上内容（版本不同出现的结果不同）

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

创建完成后

 单页面项目架构指的是，整个文件中只有一个html文件，用来被vue对象绑定，<div id="app">，里面提出一个组件的概念，只需要在index.html中切换不同的组件即可，整个项目始终只用创建一个vue对象，这样做一些全局的设置就很简单，只需要为唯一的一个vue对象设置即可。

创建成功后，在命令行窗口运行

 

输入npm run serve

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

组件路由

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

1.安装

项目终止后可以使用npm i vue-router@3.5.3命令下载vue-router插件包

2. 创建 router 目录

在该目录下创建 index.js 文件,在其中配置路由,每次新加入一个组件就需要在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: [
	{
		path: '/login',
		name: 'Login',
		component: Login
	},
	{
		path: '/main',
		name: 'Main',
		component: Main
	}
	]
});
//导出路由对象
export default rout;

3. 使用路由

在主组件App.vue中的template标签写入

< router-link to="/index">首页< /router-link>
< router-link to="/content">内容< /router-link>
< router-view/>

4.在 main.js 中配置路由

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

element-ui

①在终端使用npm i element-ui -S命令下载ElementUI框架

②在 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');