共计 3496 个字符，预计需要花费 9 分钟才能阅读完成。
人狠话不多，咱直入主题吧！
开发软件：Visual Studio Code
支持环境：nodejs+windows
版本：vue2.0
1. 初识 vuevue 是一个前端框架，使用 MVVM（Model-View-ViewModel 的简写）模式。看过官网这个介绍的心得就是看不懂。没事我举个通俗可能易懂的例子，你们随意感受一下。皮影戏很多人都知道。△吶，这就是皮影戏
我们把看到的皮影对应成 V。在幕后操作皮影的人对应成 M。把手拿皮影的人对应成 VM。
当皮影动作改变时，幕后的人动作也在做对应的改变。反过来也一样，当操作人动作改变时，皮影也在做相应的动作。
（1）李古拉雷有一个孙悟空的皮影，他的好基友想玩一下，李古拉雷直接把这个皮影给他就好，至于能玩出什么花样，就看他的能力了。（2）玩的时间长了，李古拉雷对当前这个孙悟空的颜色有点厌倦，想换个色儿，比如绿色。他拿起笔就给孙悟空的帽子该成了绿色。改过色后的孙悟空耍起金箍棒照样虎虎生威，虽然动作一样，好像更好看了。（1）（2）用我们行业黑话来讲就是低耦合，皮影和玩皮影的人是相互独立没太大关系，李古拉雷的皮影换个人照样玩，皮影换个颜色加点装饰，孙悟空还照应耍金箍棒，不太会去耍太极（这取决于李古拉雷有没有学会太极的动作）（3）有一天李古拉雷真的学会了太极的动作，这段皮影舞孙悟空耍的也是有模有样。（3）这个就是可重用性，李古拉雷想让孙悟空这么动他就得怎么动。（4）时间一长，孙悟空这个皮影玩够了，李古拉雷就和他的好基友商量，想做一个猪八戒玩，他们分工合作，李古拉雷负责练习动作，基友负责制作皮影，分工明确互不影响。（4）这个行为就是独立开发。
低耦合、可重用性、独立开发对应着皮影戏是不是更好理解了。△看完我的通俗讲解有没有这种感觉
2. 为什么选择 vue2.0？在这个教程发布之际，vue 的最新版本是 2.6，2.6 相较于 2.0 并没有特别大的升级，2.x 系列都可以向后兼容。同时本系列教程目的是让初识 vue 的朋友能快速又高效的上手开发，不会被那些官网那些原理话整的蒙圈又懵逼，也因 2.0 下的组件库已经经过时间和程序员的考验，运行稳定，种类丰富。总而言之 vue2.0 是个不错的选择，接下来的教程如果不做特殊说明,vue 是指 vue2.0 版本。
3.vue 的使用方式有几种？答：使用方式有两种：一种是直接引入 CDN 链接（引入方式同 jQuery）或者下载到本地环境，在程序中引入文件，在浏览器中直接运行。二种是在 node.js 下运行，在命令行工具中用 vue-cli 命令集进行操做（起个服务、创建项目、打包编译），程序按照 vue 的模板语法完成代码编写。注：第二种这种生猛咸湿的开发技能才是我们重点关注的对象。
4. 环境搭建 1. 下载 node 并安装 https://nodejs.org/zh-cn/ 选择左侧这个点击下载，然后一路点击一路下一步。2. 安装完成后，在 E 盘新建一个“workspace”的文件夹，进入建好的这个文件夹，按着“shift”键同时点击鼠标右键，选择“在此处打开命令窗口”。（文件夹路径可以建立在任意目录，尽量不要以中文命名）。输入: node -v，如果成功出现 node 版本号少年，棒棒哒！，node.js 安装成功了。3. 把 npm 改成 cnpm , 因为 npm 命令安装源不在境内，安装比较慢，而 cnpm 使用的是淘宝镜像，网速有保障，装起组件来丝丝顺滑，那叫流畅。切换命令：npm install -g cnpm –registry=https://registry.npm.taobao.org
△在 cmd 窗口中输入该命令（或者复制命令后右键选择粘贴）
4. 本系列教程前端开发 IDE 使用 Visual Studio Code
注：IDE 是集成开发环境，功能丰富，战斗力 MAX
下载地址：https://code.visualstudio.com/ 我们选择下载 stable(稳定版) 进行安装，如果软件是英文界面操作修改软件语言包：快捷键是：ctrl+shift+ p 搜索“configure display language”此处改成：“zh-CN”软件重启后生效，如果没有生效，还是显示英文的话，打开下面这个链接，安装中文语言包 https://marketplace.visualstu… 安装完成后，重启软件生效。至此，node.js、和开发软件就初步安装完成了。下一节我们正式进入 vue2.0 的秘密花园。
5. 第一个 helloworld! 一场天雷动地火，你的第一个 helloworld 将要面世了！先稍安勿躁，在你的 ”helloworld” 真正面世之前还有几个步骤。
1. 环境安装上面不是安装过环境了，咋还安装啊？对你没有看错，不过这里安装的环境是项目运行环境。上面安装的是开发环境，有本质的区别。运行环境安装后以后，就是鸟枪换炮，不用再一个一个苦哈哈新建目录和.html、.css、.js 文件，只要运行几条命令，项目目录和文件会自动安装完成。这个感觉倍儿爽。学会了这招，你就成为了前端圈最靓的仔。先找一个工作空间 (比如我的是在 E 盘 WorkSpace)，新建一个文件夹“v2.0-tutorial”，进入“v2.0-tutorial”，同时 按住“shift”+ 鼠标右键，点击“在此处打开命令窗口”①：输入命令：npm install vue-cli - g 在这条命令中，用到了 -g，常用的还用另外两条命令，我展开讲一下：-g: 是 –global 的缩写，安装到全局环境，最终的文件放在 node 安装目录下的 ./node_modules 中 -D: 是 –save-dev 的缩写，安装到开发环境，最终的文件放在项目中./node_modules-s: 是 –save 的缩写，安装到上线环境另 install 可以用 i 代替。so，这条命令还可以这样输入：npm i vue-cli –globalvue-cli 是什么？vue-cli 是 vue 的命令行界面，安装成功以后可以使用 vue 下的命令进行项目初始化等一些操作。△vue-cli 安装成功后的 CMD 界面
vue-cli 安装成功后后，我们继续输入第二条命令：②：输入命令：vue init webpack demo01△一直按回车键什么都不需要输入
打开 v2.0-tutorial 文件夹，看是否多了一个 “demo01″ 文件夹，这个就是自动生成的 demo 项目△自动搭建生成的项目“demo01”在 Visual Studio Code 打开 demo 文件夹：
demo01/index.html：
config：里面是一些配置文件，项目入口模板文件
src/assets : 一些静态资源问价，如图片 logo 等
src/components：组件文件夹，也是接下来使用频率最高的文件夹
router：路由配置
到这里，第一个项目总算是搭建完成了，没事跑一下看看。
2. 项目启动进入 demo01，打开 cmd 命令行，输入“npm run dev”
在浏览器输入这个地址：http://localhost:8080/ 看这个页面，说明项目运行的不错，感觉好极了！打开 src/components/HelloWorld.vue 文件①. 把 <div class=”hello”></div> 之间的标签全部干掉，对一个不留。②. 在 data 中添加一个新属性,sayHi
data(){
return {
msg: ‘Welcome to Your Vue.js App’,
sayHi:’HelloWorld!’,
}
}
③. 在 <div class=”hello”></div> 调用新添加的属性 sayHi，like this:
<div class=”hello”>
{{sayHi}}
</div>
打开浏览器看一下：
“HelloWorld” 终于出来了~
源程序如下：
<template>
<div class=”hello”>
{{sayHi}}
</div>
</template>
<script>
export default {
name: ‘HelloWorld’,
data () {
return {
msg: ‘Welcome to Your Vue.js App’,
sayHi:’HelloWorld!’,
}
}
}
</script>
<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
