Vue，开启前端之路

最近，新产品很多种子用户反馈，希望能够出PC版本或者网页版，在与产品同学沟通后，决定先出网页版，后期有时间以网页版为雏形，包装成PC版。

话入正题，虽然之前没有前端经验，但是之前有较长时间的跨平台和小程序经验，对于大概的流程还是相对比较清晰。

准备知识

• Html
• CSS
• JavaScript
• Vue
• Element

对于Html、CSS、JavaScript，花几个小时看一遍，就能掌握基础的东西。Vue.js特点就是入门简单，api 简洁一致，文档清晰，有不清楚的可以随时查阅文档。Element是饿了么开源的前端UI库，业界口碑不错。 而对于node 、npm、webpack、vue-cli等概念还是要先系统了解。

前端IDE工具：Atom

首先就是选择编辑器，前几年都是使用的Sublime Text，虽然没有什么大毛病，但是尝试Atom后，UI显得更简洁漂亮，两栏分层合理，另外能更好的对接git。这次准备系统学习前端，选择Atom。 当然，VSCode作为万能编辑器，也是一个很好的选择。

然后就是插件。 插件就是个人的爱好习惯的反映，没有好坏之分，只有合适不合适，在此不过多阐述，自行度娘搜索，选择适合自己的。

OK，还是来动手玩玩吧。

• 安装node.js

从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。 安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

1.png

• npm包管理器

npm是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。 由于npm的有些资源被墙，为了更快更稳定，可以切换到淘宝的npm镜像——cnpm。

2.png

• 安装node.js

在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

命令行：npm install vue,因为我已经安装，就不重复执行。

WeChat12e236c688ad61b8b1c24329d18a1381.png

• 安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

npm install --global vue-cli

前端框架: Vue

前端框架简介 坦率的讲，我没有接触过系统的前端学习，对于前端框架，对于JQuery、angular、Node都只是停留在认知阶段，而在开发跨平台试用RN的过程中使用过React，在使用weex时，weex是基于vue2.0，不用考虑，选择自己擅长的，只在此两者中选，React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V（视图）。Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。 综合考虑，作为客户端架构师的我，更喜欢MVVM，况且Vue.js 更容易上手，目前市场上比较流行的前后端分离的开发模式，大多前端都是vueJS做的，有啥问题还可以让后端大神带飞。

前端UI库: Element

2018年九个很受欢迎的vue前端UI框架 选择三方库，我遵循几个原则：开源GitHub上Star多； issue解决及时；稳定维护；大厂等。 先尝试Element。

------------------------------分割线------------------------------

前面的篇幅都是基础知识讲解和环境搭建。 看到这，我默认为大家的开发环境都是Vue+Atom。

创建工程

1、新建项目名

vue init webpack my-project

或者

vue init webpack-simple my-project

例如：

1550562159117.jpg

2、运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。 当然，在配置文件中也是可以修改。

按照提示，你可以

cd first-vue
npm install
npm run dev

3、安装项目所需要的依赖

1550561820078.jpg

4、运行项目

1550561887078.jpg

会自动打开浏览器，启动应用。

1550561975896.jpg

如果看到这个界面，说明配置成功。

至此，你的第一个前端工程已经完成，后面会讲解工程的项目结构和Vue语法。