创建并使用vue项目，安装Ajax(axios)，配置跨域请求，安装Vant-Weapp

转载至https://blog.csdn.net/AdminGuan/article/details/100181356

[安装node.js]

[创建vue项目]

[安装Vue.js的Ajax(axios)]

[配置跨域请求]

[安装Vant-Weapp前端框架【完整引入】]

[vue项目打包部署]

---

---

• 安装Node

注意：安装node.js时会自动安装一个npm，所以你可以跳过2、3、4步直接到第5步，也可以一步一步安装淘宝镜像库

1.安装node.js，直接下一步下一步即可，安装路径可以更改也可以不更改。安装node.js时会自动安装一个npm
1.1. 查看node.js版本：node -v
1.2. 查看npm版本：npm -v
1.3. 设置npm淘宝代理镜像【推荐，跳过2、3、4步直接到第5步】npm config set registry https://registry.npm.taobao.org
1.4.如果配置成功,执行npm info underscore会有字符串返回npm info underscore

2.安装淘宝镜像库，可以用 cnpm 替代 npm【npm访问外网比较慢，使用淘宝镜像cnpm访问外网则比较快，不推荐】npm install -g cnpm --registry=https://registry.npm.taobao.org

3.升级npm cnpm install npm -g

4.安装最新稳定版的vue cnpm install vue

5.全局安装vue-cli 脚手架cnpm install --global vue-cli如果没有安装成功，则Ctrl+C终止一下操作，用第二个命令npm install --global vue-cli

---

• 创建vue项目

1.创建一个基于webpack模板的新项目，进入到想创建项目的工作路径，再输入cmd回车就可以打开cmd。

// my-project是项目名称，请更改为自己的项目名称
vue init webpack my-project

这里需要进行一些配置，默认直接回车即可，当有【Project initialization finished!】，表示项目创建成功。
2.进入项目(my-project)路径，在项目目录下，运行项目【如果不能运行先安装项目再运行】再访问http://localhost:8080。

cd my-project // 进入项目
// cnpm install // 安装项目
cnpm run dev // 运行项目
// 或
cd my-project // 进入项目
// npm install // 安装项目
npm run dev // 运行项目

3.在项目的config文件夹的index.js配置文件中把useEslint:true改为useEslint:false，不然可能会报错。

使用复制别人创建好的项目时：进入项目(my-project)路径，在项目目录下，先安装项目再运行项目

cd my-project // 进入项目
cnpm install // 安装项目
cnpm run dev // 运行项目
// 或
cd my-project // 进入项目
npm install // 安装项目
npm run dev // 运行项目

利用npm安装模块

// 利用npm安装xxx模块到当前命令行所在目录
npm install xxx
 
// 利用npm安装全局模块xxx
npm install -g xxx

利用npm删除xxx模块

// 删除xxx模块
npm uninstall xxx
 
//删除全局模块xxx
npm uninstall -g xxx

---

• 安装Vue.js的Ajax(axios)

1.进入项目目录下(my-project)，执行一下npm语句，在项目的package.json文件中有"axios": "^0.19.0"就表示安装成功，如图：

// --save是否需要取决于你是否需要把安装版本写进package.json里面
npm install axios --save
// 或
cnpm install axios --save
// 或
npm install axios
// 或
cnpm install axios

2.修改原型链，在项目的src文件夹的main.js中引入axios，并将axios改写为Vue的原型属性，如图：

// 安装Vue.js的Ajax
import axios from 'axios' // 修改原型链，在main.js中引入axios
Vue.prototype.$ajax = axios // 将axios改写为Vue的原型属性

3.在组件中使用axios，如下：

---

• 配置跨域请求

1.在config的index.js配置文件中配置跨域请求，如图：

proxyTable: {
  '/api': { // /api可以代理http://localhost:8090/pmsapi
    target: 'http://localhost:8090/pmsapi', //后端接口地址
    changeOrigin: true, //是否允许跨越
    pathRewrite: { //路径重写
      '^/api': '', //重写，用'/api'代替target里面的地址
    }
  }
}

---

• 安装Vant-Weapp前端框架【完整引入】

1.进入项目目录下(my-project)，执行一下npm语句，在项目的package.json文件中有 "vant": "^2.9.2",就表示安装成功。npm install --save vant

2.在项目的src文件夹的main.js中引入Vant，并使用Vant，如图：

// 完整引入Vant前端框架
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

---

• vue项目打包部署

npm run build

---