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

--save 是在package.json的【dependencies】里面

--save-dev  是在package.json的【devDependencies】里面

安装node.js

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

1、安装node.js，直接下一步下一步即可，安装路径可以更改也可以不更改，如图：

查看node.js版本：node -v和查看npm版本：npm -v【安装node.js时会自动安装一个npm】，如图：

设置npm淘宝代理镜像【推荐，跳过2、3、4步直接到第5步】

npm config set registry https://registry.npm.taobao.org

 如果配置成功,执行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项目（使用vue-cli脚手架2.9.6版本，已不再使用）

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项目（使用vue-cli脚手架4.0或以上版本）

请查看 vue-cli脚手架4.0升级之路 或 vue/cli 3.0脚手架搭建

安装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，如下：

<script>
export default {
  data () {
    return {
      users: []
    }
  },
  mounted () {
    this.getDate()
  },
  methods: {
    del (id) {
      this.$ajax.get('/url' + id).then((resp) => {
        console.log(resp)
      }).catch((err) => {
        console.log(err)
      })
    },
    getDate () {
      this.$ajax.get('/url').then((resp) => {
        const datas = resp.data
        console.log(datas)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 或
    getDate () {
      this.$ajax({
        method: 'get',
        url: '/url',
        data: {}
      }).then(function (resp) {
        console.log(resp)
      }).catch(function (err) {
        console.log(err)
      })
    },
    add () {
      this.$ajax.post('/url', this.user).then((resp) => {
        console.log(resp)
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

Vue.js安装jquery

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

// 安装jquery
npm install jquery --save

// 或使用淘宝镜像，使用cnpm来安装，速度更快
cnpm install jquery --save

2、在项目的build文件夹中的webpack.base.conf.js配置文件中加入一行代码，如图：

// 引入jquery的webpack
var webpack = require("webpack")

并在项目的build文件夹中的webpack.base.conf.js配置文件最后一行中加入以下代码，如图：

// 增加jquery的plugins
plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })
]

3、最后也可以在src文件夹的main.js中加入下面这行代码，也可以不用加，如图：

// 导入jquery
import $ from 'jquery'

4、最后运行就可以了，如图：

// 运行项目
npm run dev

5、就可以在 App.vue 组件中使用jQuery了，如图：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1><br />
    <input type="text" name="username" id="username"><br />
    <input type="password" name="password" id="password"><br />
    <button type="button" id="login">立即登录</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
$(function () {
  $('#login').on('click', function () {
    var username = $('#username').val()
    var password = $('#password').val()
    console.log(username)
    console.log(password)
  })
})
</script>

<!-- 添加"scoped"属性以仅将CSS限制到此组件 -->
<style scoped>
</style>

卸载jquery

// 删除jquery模块
npm uninstall jquery --save

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

配置跨域请求

在 config 的 index.js 配置文件中，或根目录的 vue.config.js 中配置跨域请求，如图：

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

安装ElementUI前端框架【完整引入】

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

npm i element-ui -S

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

// 完整引入Element前端框架
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、使用ElementUI组件，效果如图：

<template>
  <el-table :data="users" border style="width: 100%">
    <el-table-column prop="id" label="用户ID"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="phone" label="手机号码"></el-table-column>
    <el-table-column prop="nickname" label="昵称"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
    <el-table-column prop="descList" label="角色列表"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="primary">查看</el-button>
        <el-button size="mini" type="warning">修改</el-button>
        <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      users: []
    }
  },
  mounted () {
    this.show()
  },
  methods: {
    del (id) {
      this.$ajax.get('/api/user/del/' + id).then((resp) => {
        alert('删除成功')
      }).catch((err) => {
        console.log(err)
      })
    },
    show () {
      this.$ajax.get('/api/user/list').then((resp) => {
        const datas = resp.data
        this.users = datas
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
</style>

vue项目打包部署

npm run build