Vue.js 2.0 学习

Vue.js

前期

  • Ubutu
  • npm

安装

npm install vue -g

或用Bower：

bower install vue

或安装命令行工具：

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

调试工具

Chrome 应用商场搜 Vue.js devtools， 并在浏览器拓展程序管理里开启“允许访问文件网址”

Sublime 插件

  • Vue Syntax highlight
  • Vuejs Snippets
  • HTML/CSS/JS Prettify（格式化）， 安装后 tools->HTML/CSS/JS Prettify->set prettify preference 在”allowed_file_extensions”: [“htm”, “html”, “xhtml”, “shtml”, “xml”, “svg”,”vue”] 加上vue

安装 Vue 模板

安装好vue-cli后执行：

1
$ vue init webpack AppName  #建立一个webpack打包的应用，默认使用最新版vue

用 Vue 1.x ：

1
vue init webpack#1.0 AppName

进入应用后安装依赖，包含node/webpack等

1
2
$ cd AppName
$ npm install # 或用cnpm

运行服务，才能访问index， http://localhost:8080/

1
$ npm run dev

发布：

1
npm run build

或

1
webpack build

生成文件在dist/stastic/

发布

webpack+vue能很好的完成单页面应用的开发，官方也提供了很多例子和教程。但使用webpack能不能用到多页面项目中，同时又能使用vue进行模块组件化开发呢？参考：https://github.com/laoxubuer/Webpack-Vue-MultiplePage

插件、依赖

安装：

npm i vue-resource vue-router vuex --save

main.js 加入:

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

jQuery

安装：

在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 里添加一个新的 new webpack.ProvidePlugin

1
2
3
4
5
6
7
8
9
10
11
plugins: [
  // ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

参考1, 参考2

BootStrap

安装：

npm i bootstrap --save

main.js 加入:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

Sass

  • node-sass

  • sass-loader： webpack自动打包

    npm i node-sass sass-loader –save

把文件引用放入 App.vue 顶部

<style src="./assets/sass/main.sass" lang="sass"></style>

用 webpack 的时候，尽量把资源看做模块依赖，不需要额外编译这些 sass 了，而且生产构建时自动会合并到一个 css 文件里。
https://segmentfault.com/q/1010000004479605

JS插件

https://segmentfault.com/q/1010000005169531?_ea=806312
http://blog.csdn.net/ansu2009/article/details/53305134

Ajax

除了用jQuery的Ajax，还有这个插件vue-resource，跟jquery不同的是它没有async选项，也就是说所有请求都是异步的。

Vue.js 2.0 学习

本文原创自http://laker.me/blog，转载请注明出处，欢迎交换友链

如果本文对您有帮助，微信扫一扫，请我吃个鸡腿吧