一、什么是vue.js?
Vue.js是一个构建数据驱动的web界面的库。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单。
学习网址:
http://cn.vuejs.org/guide/installation.html#NPM
http://wiki.jikexueyuan.com/project/vue-js/instal.html
http://vuejs.org/guide/installation.html
http://www.hubwiz.com/class/566e67417e7d40946afc5ddc
https://router.vuejs.org/zh-cn/index.html
二、安装vue.js
1、兼容性:
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。
Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
2、Npm安装:
在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
1.$ npm install vue
2.`# 获取CSP兼容版本:
3.`$ npm install vue@csp
4.`# 获取最新开发版本(来自于GitHub):
5.$ npm install yyx990803/vue#dev
3、命令行工具:
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
vue-cli学习网址:https://github.com/vuejs/vue-cli
译者注:对于大陆用户,建议将 npm 的注册表源设置为国内的镜像cnpm,可以大幅提升安装速度。
安装命令:
$npm install -g cnpm --registry=https://registry.npm.taobao.org
安装之后,在本文档里面所有出现使用 npm 的地方,你都可以使用 cnpm 代替
4、开发版构建:
重要:发布到 NPM 上的 CommonJS 包 (vue.common.js) 只在发布新版本时签入 master 分支,所以这些文件在 dev 分支下跟稳定版本是一样的。想使用 GitHub 上最新的源码,需要自己编译:
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build
vue_项目结构
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
build/
这个目录包含实际的配置为开发服务器和生产WebPACK的建立。通常你不需要接触这些文件,除非你想自定义WebPACK的装载机,在这种情况下,你应该看看build/webpack.base.conf.js。
config/index.js
这是主要的配置文件,暴露了一些为安装最常见的配置选项。看到API代理在发展和结合后台框架更多的细节。
src/
这是大多数应用程序代码将生活在。如何在这个目录结构都很大程度上取决于你;如果你使用的是vuex,你可以咨询建议的用途。
static/
这个目录是静态资产,你不想处理Webpack的逃生舱。他们将直接复制到同一目录下建立资产产生WebPACK。
看到处理静态资产更多的细节。
test/unit
包含单元测试的相关文件。See单元测试更多的细节。
test/e2e
端到端包含测试相关文件。See端到端的测试更多的细节。
index.html
这是模板index.html我们的单页应用。在开发和建设,Webpack将产生的资产,并为那些产生资产的网址将被自动注入到这个模板来渲染最终的HTML。
package.json
故宫包元文件包含所有的构建依赖关系和构建命令。