一, 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);