Menu
vue从基础到高级使用
一.下载安装node.js
   1. 下载地址 http://nodejs.cn,下载后直接安装,命令行输入node -v 验证是否安装成功
   2.更换国内npm镜像(npm为node.js的包管理工具,类似maven),国外镜像地址太慢
    npm install -g cnpm --registry=https://registry.npm.taobao.org
二.安装vue脚手架工具
   1.cnpm install --global vue-cli    ,输入vue验证是否安装成功
三.新建vue项目
1.命令行进入工作目录(目录为任意目录,用来存放项目源文件)输入
      E:          
      cd   vue 
2.新建项目
     vue init webpack test          回车+yes
3.进入项目目录安装依赖
     cd   test
     cnpm install
4.启动项目
     cnpm run dev        浏览器访问,默认端口为8080
5.使用开发工具开发vue,选择使用hbiuder(下载安装即可)
   1.新建项目,新建->项目->vue项目
   2.若不能运行则通过命令行进入项目所在目录,npm install
  3.运行:点击hbiuder头部运行->运行到终端->npm run  server
四.vuex的使用
1.安装:npm install vuex --save
2.使用:main.js中引入
     import Vue from 'vue'
     import Vuex from 'vuex'
     Vue.use(Vuex)
3.创建store
     const store = new Vuex.Store({});
五.vuejs-dialog提示框的使用
   1.安装:npm install vuejs-dialog
   2.main.js引入:
        import VuejsDialog from "vuejs-dialog" 
        import "vuejs-dialog/dist/vuejs-dialog.min.css"   //必须引入否则无样式
        Vue.use(VuejsDialog)
   3.使用
       this.$dialog.alert('登录失败')
六、vue定义全局函数
  1.建立fun.js文件写入如下内容
     exports.install = function (Vue, options) {
           Vue.prototype.getToken = function (){
               ...
           };
      };
   2. main.js 引入并使用
        import fun from './fun'
          Vue.use(fun);
   3.在所有组件里可调用函数
        this.getToken();
七.Runtime Only与Runtime compile
    1.Runtime Only:只包含运行时vue,借助 webpack 的 vue-loader 工具把 .vue 文件编译成     
        JavaScript
    2.Runtime compiler :运行时编译模式,extend ,components等模板中使用回传值是必须使用
       该模式否则会报错。
    3.Runtime only 切换为Runtime compile 的方法:在项目根目录下创建vue.config.js,加入   
       下列语句,重启即可
        module.exports = {
             runtimeCompiler: true
        }
 
八.ajax异步请求axios的使用
   1.安装npm install axios
   2.使用
 methods:{
            getList(){
                const self=this;
                axios.get('../data/a1.php',{params:{
                    id:2
                }}).then(function(res){
                    self.userList=res.data;
                }).catch(function(res){
                    console.log(res);
                });
            },
        }