Vue小白篇,环境搭建

前言

这部分非常的简单，很多人可能不屑一顾，所以写的人也比较少，写它的原因是，当初自己开始玩前端的时候一脸懵逼，浪费了一些时间在这一块，希望能对刚开始接触的人有所帮助。

渐进式JavaScript框架

以前用的多的都是jquery这些js框架，后面又有了react，Angular，到要学习的Vue，之所以选择vue是因为它入门简单，可以快速的培训人员进入岗位，也就是相对用人成本比较低，当然这是从招人和转型的角度说的。渐进式的js框架，我的理解是由简单到复杂的使用方式，它可以直接嵌入到html中使用，也可以像react这些一样适应各种复杂场景和要求，也可以很方便的和已有项目框架结合使用。官网文档是非常友好的，建议学习先看官方文档

环境搭建

1.直接在html代码中引用，直接在html代码中使用，可以快速的看到效果初学者会有成就感一些

开发环境版本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.使用webpack 2.1 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在开发的过程中，可以很好的即时的运行代码效果，大大提高开发效率 2.2 webpack的基本能力：处理依赖、模块化、打包 2.3 有兴趣可以去看官方文档webpack中文文档 2.4 使用前准备下载Node.js，选择稳定版本

2.5 安装完成后打开命令行管理工具，Windows键+R输入cmd运行，也可以使用Windows powershell输入命令行,显示版本号证明安装成功

npm -v   
node -v

注：npm是nodejs的包管理器，所以要先安装nodejs，有语言开发经验的应该接触过包管理器，类似于的nuget，maven，gradle

2.7 安装cnpm 因为npm安装插件是从国外服务器下载，受网络的影响比较大，淘宝团队用npmjs.org 镜像弄出了cnpm

输入命令行，安装完成后用cnpm替代npm运行之后的命令行就行了，同上面一样安装完后命令：cnpm -v 查看是否安装成功
npm install -g cnpm -registry=https://registry.npm.taobao.org

2.8 Vue CLI是vue的脚手架工具，可以快速搭建vue环境，是一个基于 Vue.js 进行快速开发的完整系统

安装
cnpm install -g @vue/cli

2.9利用Vue CLI创建第一个项目 2.9.1在命令行中定位到代码保存文件夹，例如D盘Code文件夹下,命名为oneDemo

vue create my_demo

回车，当前使用默认的再次回车就行了，等待生成代码 执行后结果

输入命令行

执行成功后结果，在浏览器中输入http://localhost:8080/就可以看到运行效果了

生成代码

开发工具

开发工具很多人都选择vscode，小巧快速，插件多。直接官网下载vscode安装就行了，也有国内的HBuilderX，这种东西看信仰啦。

总结：vue的基本环境搭建已经完成，随人简单，还是希望对部分人有所帮助。

转载于:https://my.oschina.net/u/4151116/blog/3101610