vue2学习

安装node.js
cmd测试是否安装成功

node -v

修改全局目录

npm config set prefix "D:\node\global"
npm config set cache "D:\node\cache"

查看

npm list -global

配置镜像

npm config set registry=http://registry.npm.taobao.org	

获取vue信息

npm info vue

安装vue-cli

npm install vue-cli -g

设置环境变量,测试vue

vue -V

切换到想要的目录生成webpack

d:
cd www
vue init webpack web

安装依赖

npm install

运行配置

npm run dev

生成静态html文件

npm run build

npm start

vue设置404跳转,router的index.js文件

import Error from ‘@/components/Error’

{
path: ‘*’,
name: ‘Error’,
component: Error,
meta: {
title: ‘404’
}
},

设置title
安装扩展

npm install vue-wechat-title --save

main.js引入

import VueWechatTitle from ‘vue-wechat-title’;
Vue.use(VueWechatTitle)

App.vue

ajax请求

npm install axios --save

引入jquery

npm install jquery -s

在项目目录下build下的webpack.base.conf.js文件头部加入

var webpack = require(‘webpack’)

并在module.exports的尾部加入

plugins: [
　　new webpack.optimize.CommonsChunkPlugin(‘common.js’),
　　new webpack.ProvidePlugin({
　　　　jQuery: “jquery”,
　　　　$: “jquery”
　　})
]

重启服务

npm run dev

vue引入static的css

全局组件loading和弹窗组件,由于不想用vuex做全局状态管理,本来做组件,但是发现大部分要使用use,但是已经封装axios在js里面了,所有换了种方法作为js方法引入,但是使用了组件
index.js

```javascript
import TestComponent from './test';
import Vue from 'vue';

let instance

const TestConstructor = Vue.extend(TestComponent);

instance = new TestConstructor({
  el: document.createElement('div')
})

const test = {
  show(options = {}) {
    document.body.appendChild(instance.$el);
    instance.show = true;
  },
  hide() {
    instance.$el.remove();
    instance.show = false;
  }
}

export default test

test.vue

<template>
  <div class="active" v-show="show">测试</div>
</template>

<script>
  export default {
    name: 'test',
    props: {
      show: false
    },
  }
</script>

<style scoped>

</style>

使用方法

import './test';
test.show()

@ webstrom无法识别路径
File->Settings

在Manually引入build里面的webpack.base.conf.js

动态绑定组件:is

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符

获取DOM元素

this.$refs.test.$el