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>

备注:

1. 已经在webpack中配置了，所以这里不需要引入任何less文件。
2. 在style中声明lang="less"。 注意： scoped的作用仅仅是限定css的作用域，防止变量污染。
3. 这样就可以根据less的语法使用了。
4. scoped可以隔离作用域了

vue使用sass

npm  install sass-loader --save-dev

npm install node-sass --sava-dev

 

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{

　　test: /\.scss$/,

　　loaders: ['style', 'css', 'sass']

}

 

"sass-loader": "^7.0.0", 的版本尽量不用8.0的，  如果默认安装8.0   那么手动修改为7.0   然后运行  npm i

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