扫一扫vue从基础到高级使用
来源：未知 时间：2019-35-16 浏览次数：198次
一.下载安装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);
});
},
}