VUE项目环境搭建
1.下载node.js(http://nodejs.cn)
2.安装node.js
3.查看node.js安装版本，命令行下执行;node -v
4.设置node.js缓存和全局信息存放路径
4.1安装目录下面新建node_global和node_cache文件夹
4.2node中配置信息路径
npm config set cache "D:\tools\nodejs\node_cache"npm config set prefix "D:\tools\nodejs\node_global"
5.基于 Node.js 安装cnpm（淘宝镜像） ps:cnpm和npm一样使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
6.配置环境变量
PATH D:\tools\nodejs\node_global;NODE_PATH D:\tools\nodejs\node_modules
7.安装vue
cnpm install vue -g
8.安装vue命令行工具，即vue-cli 脚手架
cnpm install vue-cli -g
**************node.js以及vue环境搭建完成，开始搭建 vue demo 工程***************
9.创建vue项目，进入代码存放目录，并打开命令行，执行vue工程初始化(有点耗时)
vue init webpack vuedemo
10.进行vue工程目录，运行vue
npm run dev
************ vue 环境搭建完成，开始添加一个页面进行http请求*********************
11.使用Hbuilder工具导入 vue 工程代码
12 vue 框架设置http请求第三方模块（package.json）
"axios": "^0.19.0"
13vue 框架引入http依赖（main.js）
//添加http请求import axios from 'axios';Vue.prototype.$axios = axios;
14.添加http请求处理公用方法（http.js）
import axios from 'axios'import qs from 'qs'axios.defaults.timeout = 5000; //响应时间axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头axios.defaults.baseURL = ''; //配置接口地址//POST传参序列化(添加请求拦截器)axios.interceptors.request.use((config) => {//在发送请求之前做某件事if (config.method === 'post') {// config.data = qs.stringify(config.data);}return config;}, (error) => {console.log('错误的传参')return Promise.reject(error);});//返回状态判断(添加响应拦截器)axios.interceptors.response.use((res) => {//对响应数据做些事if (!res.data.success) {return Promise.resolve(res);}return res;}, (error) => {console.log('网络异常')return Promise.reject(error);});//返回一个Promise(发送post请求)export function post(url, params, datas) {return new Promise((resolve, reject) => {axios({method: 'post',url: url,params: params,data: datas}).then(response => {resolve(response.data);}, err => {reject(err);}).catch((error) => {reject(error)})})}返回一个Promise(发送get请求)export function fetchGet(url, param) {return new Promise((resolve, reject) => {axios.get(url, {params: param}).then(response => {resolve(response)}, err => {reject(err)}).catch((error) => {reject(error)})})}export default {post,fetchGet,}
15.添加自定义vue组件(MyVue.vue)
<template><div><span>MY VUE</span><button v-on:click="queryInfo()">查询数据</button></div></template><script>import http from '../http.js'export default {//页面初始化方法mounted() {},methods: {queryInfo() {var params = {"id": 1}http.fetchGet('/testController/get.action?id=1', params).then((response) => {alert("id : " + response.data.id + ", content : " + response.data.content);}).catch(err => {console.log(err)})}},data() {return {}}}</script><style></style>
16.引入自定义组件（index.js）
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import MyVue from '@/components/MyVue'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/MyVue',name: 'MyVue',component: MyVue,children: []}]})
17.设置http请求代理（index.js）
//设置跨域信息proxyTable: {'/': {target: 'http://127.0.0.1:8082',changeOrigin: true,pathRewrite: {}}},
18.vue工程进行第三包下载
npm install
19.重启服务 npm run dev，浏览器输入：http://localhost:8080/#/MyVue，并点击“查询数据”按钮
命令
node -v // 查看安装node版本vue -V // 查看vue版本where node // 查看node的安装路径npm run build // vue 打包npm install // 初始化vue工程
悠悠
小鱼儿
今天药忘吃喽~
太过爱你忘了你带给我的痛
还没有评论，来说两句吧...