不惑之年的硬件牛人一步一步教你学Vue.js开发实战（一）---理论知识学习

前言：笔者曾经有18年的硬件研发经验，从（1）51单片机到（2）FPGA到（3）嵌入式ARM(ARM9到CORTEX A9)全都研发设计过，产品从（1）B超的整机研发到（2）智能家居系统到（3）无线电监测机到（4）平板电脑研发到（5）路灯智能控制到（5）工业电脑均有涉及，从（1）普通的电子技术工程师到（2）副总工程师到（3）副总经理到（4）事业部总经理。。。从2017年开始转到系统软件框架，而且偏向于物联网方面的系统，组建了自己的物联网项目研发团队，我们从0开始搭建一个中型物联项目平台，从底层硬件到物联后台到移动端到物联项目的盈利模式。。。。我们一直的路上，努力在三年内打造国内较好的物联网整体解决方案，如有需要合作的大型传统企业转型到物联网+可以直接和我联系！QQ：876477059。好了，开始教你学习Vue.js，因为我们项目需要使用该技术来实现前后端分离，所以开始我们的学习吧。

        今天是：2018年6月27日      研究主题：Vue.js的理论知识学习（一）

        一、什么是Vue.js？

      Vue.js是一个轻巧、高性能、可中间化的MVVM库，同时拥有非常容易上手的API；

      Vue.js是一个构建数据驱动的Web界面的库；

      Vue.js是一套构建用户界面的渐进式框架。它采用自底向上增量开发的设计。Vue的核心库值关注视图层，非常容易与其它库或已有项目整合。

      二、第一个Vue实例

      

    

   三、Vue.js 的安装

  1、先进行Node.js的安装

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。

你可以根据不同平台系统选择你需要的Node.js安装包。

Node.js 历史版本下载地址：https://nodejs.org/dist/

注意：Linux上安装Node.js需要安装Python 2.6 或 2.7 ，不建议安装Python 3.0以上版本。

---

Window 上安装Node.js

你可以采用以下两种方式来安装。

2、Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

本文实例以 v0.10.26 版本为例，其他版本类似， 安装步骤：

步骤 1 : 双击下载后的安装包 v0.10.26，如下所示：

步骤 2 : 点击以上的Run(运行)，将出现如下界面：

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

安装过程：

点击 Finish（完成）按钮退出安装向导。

在环境变量中添加安装路径：

并检查版本是否可用

3、在D盘下新建叫“vuestudy”的文件夹，并进入该文件夹

 

（1）查看版本

（2）、安装淘宝npm 中文镜像

在命令行输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安装完成

（3）、 全局安装vue-cli

   （4）、创建一个基于webpack模板的新项目

  

   

（5）、

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

（6）、访问网页：http://localhost:8080/

以上安装成功！

四、VUE的目录结构

上一章节中我们使用了 npm 安装项目，我们在 IDE（Eclipse、Atom等） 中打开该目录，结构如下所示：

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

在前面我们打开 APP.vue 文件，代码如下（解释在注释中）：

src/APP.vue

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：