介绍
vue.js 是一套构建用户界面的渐进式框架.
vue 只关注视图层, 采用自底向上增量开发的设计.
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.
第一步: 安装 node.JS
从 node.JS 官网下载并安装 node, 安装步骤就是一路点 next 即可~
安装完成后输入 cmd 打开命令行工具输入命令 node -v, 出现版本号说明 node 安装成功啦.
后面我们安装其他依赖时都要通过 NPM 进行安装, 但是由于 NPM 的有些资源被墙, 为了更快更稳定, 所以我们需要切换到淘宝的 NPM 镜像 --cnpm.
安装 cnpm
在命令行输入:
NPM install -g cnpm --registry=https://registry.npm.taobao.org
接下来等待安装即可~
安装完成后输入 cnpm-v 查看版本:
以后的 NPM 写法可以用 cnpm 代替了.
第二步: 安装 vue
cnpm install vue
安装 vue-cli 脚手架
- # 全局安装
- cnpm install -g vue-cli
创建一个基于 webpack 模板的新项目
- #my-project 为自定义项目名
- $ vue init webpack my-project
运行初始化命令的时候回让用户输入几个基本的选项, 如项目名称, 描述, 作者等信息, 其中我把 ESLint,tests,e2s 都设为 n, 即不想用到这些, 其他全部为 y.
- Project name (my-project) # 项目名称 (我的项目)
- Project description (A Vue.JS project) # 项目描述一个 Vue.JS 项目
Author 作者 (你的名字)
- Install vue-router? (Y/n) # 是否安装 Vue 路由, 也就是以后是 spa(但页面应用需要的模块)
- Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
- Pick an ESLint preset (Use arrow keys) # 选择一个预置 ESLint(使用箭头键)
- Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测 Karma + Mocha? (Y/ N)
- Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试, Nightwatch? (Y/ N)
需要注意的是项目名字不能大写~
安装依赖
初始化的项目是没有依赖的, 直接运行会报错, 所以得先安装依赖:
cnpm install
接下来运行:
cnpm run dev
或者这样也行:
cnpm start
运行完之后出现这个页面说明已经脚手架搭建成功啦.
来源: http://www.bubuko.com/infodetail-2981132.html