前端系列——Vue入门教程一

“还记得去年，心血来潮，打开一直看的简书也开始了自己的写作杂谈，写了三篇畅谈之后，激情再一次的冷却，时至今日，经过系列的计划以及思想的斗争，由于最近开始研究Vue的一些列开发技能，同时近期也开始培训我弟弟进行相关前端开发技能的学习，最后决定以Vue这个知识点再一次踏上写作之旅，寄望于这次能够通过vue系列文章走得更深更远”。

好了，废话不多说，接下来进入本系列重点Vue的介绍。

官方介绍：Vue.js—— 一个渐进式的JavaScript 框架，其具备易用、灵活、高效等三大特点。

官网地址：https://cn.vuejs.org/

Vue支持两种方式的开发模式，而这两种我也都进行过一段时间的开发。

1、引入式开发模式

最初由于个人之前也没有接触过这套框架，所以最开始开发的单页面应用均是使用此种开发模式进行Vue环境搭建的，引入式有开发环境和生产环境的区别，主要在于开发环境有更多帮助开发的命令行警告提示，而生产环境则通过官方cdn加速提升了加载速度和性能。

开发环境引入：<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境引入：<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue"></script>

2、官方推荐的Vue-cli的脚手架安装模式以及node的安装模式

使用这中类型的安装模式需要电脑具备node以及npm的环境，通过npm方式安装Vue相关组件。

A、node安装(windows为例)

安装node其实很简单，只需要打开node的官网下载链接，下载到相应的版本进行傻瓜式安装即可。node.js官网下载地址：https://nodejs.org/zh-cn/download/

官网截图

B、npm安装

npm的安装其实无需单独安装，在较新版的node中均带有npm程序文件，安装node的同时，npm程序也一并安装成功了。

校验以上两种程序文件是否已经安装到自己的电脑上了，可以在命令行中使用：node --version以及npm --version进行测试，如果显示效果如下图所示展示出了所安装版本号，即为安装成功。

校验node以及npm环境是否正确安装

node以及npm安装好后，我们就可以使用npm命令安装vue环境了，安装命令：npm install vue -g，-g 代表全局安装即安装到您的整个电脑环境中。

3、构建项目实例

Vue相关基础环境通过以上两步已经安装在电脑中了，接下来我们要通过构建一个简单的Vue项目实例，构建方式本人推荐使用官方的脚手架工具Vue-cli以及主流的webpack。

Vue-cli作为Vue官方推荐的构建项目的工具，其构建方式较为简单，构建出的项目初始化结构携带有官方默认的几种模板可供选择。首先我们安装Vue-cli到本地环境，安装方式：npm install vue-cli。安装完成后继续安装webpack，安装方式：npm install webpack -g;等待两者安装完成后可以通过以下命令构建vue init webpack ProjectName,构建过程中会根据你的需要设置项目名称、版本号、以及一些模板，有需要选择“Y”回车即可，不要选选择“N”回车即可，构建完成项目结构清单如下图所示：

vue-cli使用webpack模板构建的项目结构清单

运行项目命令为进入项目文件夹使用：npm run dev 即可运行项目，运行后的项目默认地址为http://localhost:8080，访问该地址即可访问当前项目。

至此，我想你已经学会了Vue的基本概念以及如何构建一个基础的webpack模板的Vue项目，下一章节我们进行相关Vue以及项目结构知识的进一步讲解~

作者：coder小生
链接：https://www.jianshu.com/p/ffa884b30770