vue-cli环境搭建流程【node.js运行环境、组件路由、ElementUI】

目录

1.安装Node.js运行环境

2.在HbuilderX中搭建一个vue-cli项目(标准的前端项目)

vue-cli项目结构介绍

单页面项目架构

3.创建成功后，在命令行窗口启动前端项目

*终端无法打开的解决办法：

导入idea的操作流程：

​编辑

4.组件路由

组件模板

1.安装

2.创建路由的配置文件

3.在main.js中配置路由

   显示组件

4.使用

5.前端项目打包

ElementUI

1.安装：

2.在main.js中配置

ElementUI中用到的组件：

测试：

代码：

---

本篇文章基于Vue（前端框架）

1.安装Node.js运行环境

在cmd中输入两个命令：

• node -v

• npm -v

• 如下图所示：环境就已经自动配置好了。

2.在HbuilderX中搭建一个vue-cli项目(标准的前端项目)

vue-cli项目结构介绍

• 单页面项目架构

  整个页面只有一个html，用来被vue对象绑定

  其中提出一个组件的概念Hello.vue，只需在index.html中切换不同的组件即可。整个项目中始终只用创建一个vue对象，这样做一些全局设置就非常的简单，只需为唯一的一个vue对象设置

3.创建成功后，在命令行窗口启动前端项目

• 窗口：终端

• 命令：npm run serve

• 启动成功后，出现访问地址：http://localhost:8080/

• 命令行输入：ctrl+c 终止服务

  *终端无法打开的解决办法：

  1.右键项目—> 外部命令 —>npm run serve

  2.安装内置终端插件

  • 工具—> 插件安装—> 点击内置终端安装即可

  3.在命令行输入:npm run serve

  4.将项目导入到idea中

  导入idea的操作流程：

  • 1.选择idea中Open or Import

  

  • 2.将文件所在目录导入即可

  在idea命令行输入启动项目的命令：npm run serve

4.组件路由

组件模板

 

​

​

1.安装

vue router 是 Vue.js 官方路由管理器，是一个插件包，用npm安装。

• 打开命令行工具，进入项目，输入命令：

  npm i [email protected]

  • 输入命令后，在package.json中会出现"vue-router":"^3.5.3"，则安装成功。

  

2.创建路由的配置文件

搭建步骤：

• 创建router目录

  在src中创建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",
                component:Main
            },
       ]
});
//导出路由对象
export default rout;

3.在main.js中配置路由

//main.js是项目核心配置文件
//导入vue.js
import Vue from 'vue'
//导入一个默认的组件
import App from './App.vue'
​
Vue.config.productionTip = false
​
 //导入路由组件   ./表示当前目录
import router from "./router/index.js";
Vue.use(router);
​
//导入ElementUI框架，会导入ElementUI中所有的组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
​
//创建项目中唯一的一个vue对象
new Vue({
  render: h => h(App),  //默认将app.vue组件加载到唯一的index.html中的
div上面,
  router,
}).$mount('#app')
​

​

• 显示组件

  在App.vue的

  中添加代码

4.使用

1.重新启动项目，输入命令：npm run serve

2.在地址后直接输入组件路由地址，如：login

5.前端项目打包

• 命令：npm run build

打包后的内容放在一个dist目录中，只暴露一个index.html ，其余的被压缩处理

---

ElementUI

• 是一个前端UI框架，封装许多写好的ui组件，如：表单布局、布局组件、表格组件...

• 支持vue.js的语法

使用：

1.安装：

在命令行输入： npm i element-ui -S

成功后在node_modules会出现element-ui目录

• 2.在main.js中配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

• ElementUI中用到的组件：

  表单组件

  文本输入框组件

  密码输入框组件

  按钮组件

  图表组件

  container容器组件

  菜单组件

  消息框组件

测试：

切换到login页面

 输入后切换到main页面

点击安全退出

 

 点击确定，切回到login页面

代码：

Login.vue

main.vue