前端项目框架的搭建（Vue.js+ElementUI骨灰级保姆教程）

目录

1.下载node.js

         1.1安装

         1.2检查一下:Window+R

2.在HBuilder X里面用脚手架(vue-cli)创建项目

        2.1创建项目

        2.2项目结构

        2.3初次启动项目

         2.4启动项目命令

3.组件路由(vue-route)

       3.1简单登录组件

       3.2安装vue-router

        3.3配置

        3.4启动项目

4.ElementUI

        4.1安装

         4.2配置

         4.3"搬用工"

        4.4最终效果

---

        为了方便起见我们在HBuilder X里面来搭建一个简单的项目框架。下面我们开始干！

1.下载node.js

http://nodejs.cn/download/

         1.1安装

 

 

 

 

 如果按步骤一步步操作，其实环境变量已经自动配置好了。

         1.2检查一下:Window+R

 则证明下载配置node.js成功

2.在HBuilder X里面用脚手架(vue-cli)创建项目

        2.1创建项目

        2.2项目结构

模板下载好后,项目里面包含这些结构:

 

 其实我们可以把不用的东西都先删掉，删完后基本先成这个样子。

 下面我们对main.js里面的东西做解释

        2.3初次启动项目

 如果没有下载内置终端的话要下载内置终端，工具——插件安装里面:

         2.4启动项目命令

 

        复制网址链接到浏览器打开即可。

        嗯~ o(*￣▽￣*)o。。是不是只有一个图标？？？

3.组件路由(vue-route)

        这是因为我们的App.vue里面只有一个img，如果想要显示更多的东西，那我们必须在外面写一些组件(.vue文件)，在App.vue中不断切换组件，就表现出了不同页面的效果，由此我们引出组件路由。

       3.1简单登录组件

        在此之前我们先举例写一个简单的Login.vue组件吧。(下面的css没有展示全，但无关紧要)

      

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

       3.2安装vue-router

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

        npm i vue-router@3.5.3

        3.3配置

安装完后我们就要搭建和配置路由了。

       首先我们创建router目录并且目录下在创建一个index.js。在其中就可以配置路由:

 下面我们到main.js核心配置文件里面配置。

 最后到App.vue里面添加"画布"

        3.4启动项目

输入:localhost:8080/#/login

         效果达到！！！

4.ElementUI

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

Element - The world's most popular Vue UI framework

        4.1安装

        

         4.2配置

安装好之后，我们来搭建配置。

         4.3"搬用工"

        配置好之后，我们就可以到ElementUI里面抄东西了，进入到官网后.........因为我们这举例要写登录页面，所以我们就在里面找表单组件吧。

         我们将人家的代码拿过来，把我们不需要的删掉，里面数据再改改，对于布局自己添加一些简单的css 。

        4.4最终效果

 由此我们页面也就会美观一些。