前期
- Ubutu
- npm
安装
npm install vue -g
或用Bower:
bower install vue
或安装命令行工具:
调试工具
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后执行:
|
|
用 Vue 1.x :
|
|
进入应用后安装依赖,包含node/webpack等
运行服务,才能访问index, http://localhost:8080/
发布:
或
生成文件在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
|
|
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选项,也就是说所有请求都是异步的。