vue 安装及使用
一, vue.js 2.0
1, cnpm install vue-cli -g 全局安装
2, 运行vue查看安装是否成功(创建vue-cli目录: vue init webpack demo)
3, npm init -y
用来初始化生成一个新的 package.json 文件,它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。
如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件
4, 运行项目执行 npm run dev (注：此时不能用cnpm来运行，必须是npm);
5, 我们需要用到路由功能 所以需要安装vue-router
安装方法：cnpm install vue-router --save
6, 需要用到ajax请求,利用vue-resource
安装方法：cnpm install vue-resource--save 安装完成会在package.json中生成版本信息
注意：vue官方不在继续维护vue-resource，并推荐大家使用 axios。
7, 需要用到ajax请求,也可以利用 axios
安装方法: cnpm install axios --save
$http.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
main.js 文件插入代码
import axios from 'axios'
Vue.prototype.$http = axios;
补充: 安装qs
(c)npm install qs -S
1,用途
在axios中, 利用qs包装data数据
2, 用法:
import Qs from 'qs'; Qs.stringify(data); Qs.parse(data)
注意: axios 不提供jsonp请求方式
解决axios 跨域问题
一, 在使用axios发送请求时，服务器端设置 res.header(“Access-Control-Allow-Origin”, “*”);可以正确得到结果
二,
1, 引入依赖 cnpm install jsonp
2,导入到vue文件 插入到 main.js
import jsonp from 'jsonp'
3,使用方法
jsonp("http://cross-domain.com",//替换网址
{
//jsonp的回调函数名
name: 'success_jsonpCallback'
},
//注意第一个参数是 err，第二个参数是 data
function (err, data) {
console.log(data);
});
vuex的安装
1, npm install vuex --save
2, 在src下新建一个名叫store的文件夹
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex);
element-ui的安装
1,cnpm install style-loader -S
2,cnpm install element-ui -S
3,安装完成之后，在main.js里面全局引用
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //注意：样式要单独引用 //然后全局注册 Vue.use(ElementUI)
vue使用less
1,安装: 即通过npm安装less和less-loader
npm install less less-loader --save-dev
2, 配置: 在配置文件中配置webpack.dev.conf.js, 实际上如果我们通过vue-cli来构建项目，这一步是可以省略的。
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
3, 使用: 在 .vue文件中使用
<template>
<div class="hello">
<h2>{{msg}}</h2>
<h2>Essential Links</h2>
<ul>
<li>Core Docs</li>
</ul>
<h2>Ecosystem</h2>
</div>
</template>
<script>
export default {
name: 'hello',
data: function () {
return {
msg: "Welcome to your vue.js app"
}
}
}
</script>
<style scoped lang="less">
.hello {
color: red;
font-size: 0.45rem;
h2 {
color: blue;
}
}
</style>
备注:
- 已经在webpack中配置了，所以这里不需要引入任何less文件。
- 在style中声明lang="less"。 注意： scoped的作用仅仅是限定css的作用域，防止变量污染。
- 这样就可以根据less的语法使用了。
- scoped可以隔离作用域了
vue使用sass
Vant的安装与使用
1,安装: npm install vant --save
如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。
npm install vant --save --registry=https://registry.npm.taobao.org
2, 优雅的引入Vant
vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。
3, 安装: babel-plugin-import
npm install babel-plugin-import --save-dev
4, 在.babelrc中配置plugins（插件）
["import",{"libraryName":"vant","style":true}]
"plugins": [ "transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", ["import",{"libraryName":"vant","style":true}] ]
5, 按需使用Vant组件1
我们设置好.babelrc后，就可以按需引入Vant框架了。比如现在我们引入一个Button组件，在src/main.js里加入下面的代码：
import { Button } from 'vant'
Vue.use(Button)
有了这段代码之后，我们就可以在需要的组件页面中加入Button了.
<van-button type="primary">主要按钮</van-button>
6, 按需使用Vant组件2
不在src/main.js里加入代码，而在需要的页面单独引入：
<script> import { Loading } from 'vant' export default { components: { [Loading.name]: Loading } } </script>
然后在页面中加入组件代码
<template>
<div>
<van-loading color="black" />
<van-loading color="white" />
<van-loading type="spinner" color="black" />
<van-loading type="spinner" color="white" />
</div>
</template>
mint-ui
安装: npm install mint-ui -S
// 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; Vue.use(Mint); // 按需引入部分组件 import { Cell, Checklist } from 'mint-ui'; Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);
