Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
废话不再多少，我们来看一下如何使用 Vue-cli 生成项目架构
在开始此教程前，请确保您的电脑已经装了Node.js
如果没有安装，请自行安装Node.js安装
安装完Node.js之后我们可以在命令行中输入 node-v 可以查看node版本
1、 安装vue-cli
我们使用npm进行安装 npm install -g vue-cli
使用命令行进入工作去文件夹 如图 1-1：
然后在当前目录输入 npm install -g vue-cli
等待大约一分钟安装成功
2、 使用vue-cli初始化项目
命令行继续输入 vue init webpack vue-demo
如图1-2：
Project name 默认是你输入命令行里的项目名称
Project description 是项目的描述
这里我们使用了ESLint 进行规范代码
我没有使用任何单元测试，其实在实际开发中很少会去自己写测试用例，反正我不会写，嘿嘿~~
3、进入刚刚创建的项目目录
cd vue-demo
4、安装项目所需的依赖
npm install
等待安装依赖包
5、开始运行
使用命令npm run dev
不出意外的话你已经在浏览器中看到了刚刚创建的项目了
如果报错，那就是你的端口被占用了，可以去修改本项目的端口。
修改方法如下：
使用你喜欢的编辑器（我使用的是webstorm）打开该项目
打开config文件夹里的index.js文件
如图1-3所示：
红色框里就是当前的端口号，可以改成其他端口号，只要不被占用就行
有兴趣的朋友可以研究一下项目中的配置文件
对于webpack不熟悉的同学可以看一下入门Webpack，看这篇就够了
到现在为止我们已经掌握了vue的第一步
转载请注明出处 https://dongsipan.github.io/2017/01/20/Vue-js-Start/
作者 dongsipan 2017-01-20 10:40:03