Vue.js的搭建

Author Avatar
七星泪脉 Aug 06, 2016

Vue.js之过来人的搭建

自己看了很多版本的安装，最后无奈之下的我苦思冥想终于搞了出来，于是就把这个当做博客来分享给大家

一、大家先点击Vue.js中文官网

什么是Vue.js其强大之处体现在哪：

  • vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

  • Vue.js是一个构建数据驱动的 web 界面的库。

  • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

  • Vue.js 自身不是一个全能框架——它只聚焦于视图层。

  • 就因它非常容易学习，之所以才容易与其它库或已有项目整合。

  • 另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

  • 如果遇到比较复杂的、父子组件间需要频繁通信的场景，可以用 vuex 搞定。

下面就是双向绑定的图解

  • 通过图解我们可以清晰的看到就像HelloWorld展示的那样，app.html是view层，app.js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。

二、 下面就可以按照我给大家开辟的搭建方式搭建Vue.js

  • 接下来继续点击安装

  • 在我第一次进入官网的时候，因为我认为这前面都是Vue.js的安装呢，我就糊里糊涂的把前面的东西都给仔细的观看了一下，第一个感觉就是，我擦~这什么东西？看不懂？？？我最后在下面就看见我想要的东西，嘿嘿那就是搭建的命令，

1
2
3
4
5
6
7
8
   # 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

1
2
3
4
5
6
一、在此要注意的是什么。
	1、大家的node.js版本是多少
	2、npm的版本是多少
二、不知道的估计占大多数，可通过下面的方法来查询node.js和npm的版本
	1、node -v
	2、npm -v

其查询版本就是版本不能低，node.js可以是V4.4.4，但是你的npm必须是高于3.1以上，原因是Vue.js搭建的时候需要npm在3.1以上，

对于我这个穷作者为大家推荐安装包模式的安装，其下载的链接node.js中文官网

当然现在先别急着复制命令就开始运行，可能你会在npm install 处卡住，这时你就要阅读下面的解释，为什么？？？

###想必大多数的人都知道，是因为npm在国外，像我们国内的电脑去下载国外的，受到了很大的限制，当然有的人，掏钱买包年或者包月的VPN来翻墙下载。

  • 另外我还给大家推荐一个淘宝镜像安装，这样的话可以加快我们的搭建，但是也有弊端。
  • 其弊端的问题在于国内镜像cnpm安装(会导致后面缺了很多依赖库)，所有这个淘宝镜像的安装我贴出来，但是不推荐大家安装

npm install 或者 cnpm install 运行完后大家就可以运行接下来的命令npm run dev

奇迹的你们会发现我成功的搭建好了

之后的组件和编写我会在后续更新~~~喵哩个咪！！！。

expand_less