技术研究：Vue.js + Element UI联合开发

目的

基于Vue.js和Element UI搭建一个可以开发的基础Web项目。

介绍

Vue.js

• Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
• Vue 只关注视图层， 采用自底向上增量开发的设计。
• Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
• Vue 学习起来非常简单.

学习途径

官方网站
菜鸟教程

个人理解

• 是一套方便开发Html+Css+Js的方便框架

Element UI

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

学习途径

官方网站
菜鸟教程

个人理解

• 对于开发Web来说，节省了你大量的时间去写样式，专注于功能开发。

操作步骤

安装Node.js

Node.js官网
我的云存储对象下载地址
知享奇论坛

控制台

• 输入node -v
  
  出现版本信息，恭喜你成功了。

其他博主,安装实例

博主甲
博主乙

安装Vue

步骤一

• cmd或者git窗口中输入

npm install--global vue-cli

• 检查是否安装成功,cmd或git中输入

vue -V	//大写

出现以下场景
恭喜你安装成功！！

创建Vue项目

• 找一个空文件夹输入

vue init webpack mydemo 

等待即可，在等待的过程中，补充一些知识
webpack ：为模板，这里只是最长用的一种模板

• 安装完之后结构如下
  

额外提示

• 在创建过程中，会提示你一系列是否下一步，请按照如下操作进行

Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查js代码）：n
Set up unit tests（安装单元测试工具）：n
Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
Should we run npm install for you after the project has been created? (recommended)：回车。

• 文档结构解析

bulid 
里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件。 
config 
配置文件，执行文件需要的配置信息。 
src 
资源文件，所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。 
assets 
资源文件夹，放图片之类的资源， 
components 
组件文件夹，写的所有组件都放在这个文件夹下， 
router 
路由文件夹，这个决定了页面的跳转规则， 
App.vue 
应用组件，所有自己写的组件，都是在这个组件之上运行了。 
main.js 
webpack入口文件。

本地部署

• 执行命令

npm run dev

• 打开浏览器，输入地址
  

http://127.0.0.1:8010   //输入你的地址

• 出现如下页面
  
  恭喜你成功创建了一个简单的Vue界面。

添加Element UI插件

• 进入到你的工程文件夹内，打开git或者cmd
• 输入下方代码

npm i element-ui -S

• 然后在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)
});

额外提示

• 项目目录下的/src/App.vue进行工程的开始，而不是index.html。
• 然后就可以使用Element UI的元素了。

最后

其他前端web插件

Web插件汇总

另一种创建方式

• 使用HbuilderX进行创建

步骤

• 下载Hbuilderx,无脑安装
• 然后文件-新建-项目
  
  选择红线框的模板进行创建，然后等待创建就可以了，是不是很方便。
• 运行的时候点击
  运行-运行到终端-npm rum dev
  
  就可以了。

广告

• 我的公众号知享奇，有很多免费资源
  
• 我的论坛
  知享奇,也有很多免费资源