创建并使用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 underscore2、安装淘宝镜像库可以用 cnpm 替代 npm【npm访问外网比较慢使用淘宝镜像cnpm访问外网则比较快不推荐】npm install -g cnpm --registryhttps://registry.npm.taobao.org3、升级npmcnpm install npm -g4、安装最新稳定版的vuecnpm install vue5、全局安装vue-cli 脚手架cnpm install --global vue-cli如果第一个命令一直像如图所示CtrlC终止一下操作用第二个命令如图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 axios2、修改原型链在项目的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) }) } } } /scriptVue.js安装jquery1、进入项目目录下(my-project)执行一下npm语句在项目的package.json文件中有jquery:^3.4.1就表示安装成功如图// 安装jquery npm install jquery --save // 或使用淘宝镜像使用cnpm来安装速度更快 cnpm install jquery --save2、在项目的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 jquery4、最后运行就可以了如图// 运行项目 npm run dev5、就可以在 App.vue 组件中使用jQuery了如图template div classhello h1{{ msg }}/h1br / input typetext nameusername idusernamebr / input typepassword namepassword idpasswordbr / button typebutton idlogin立即登录/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 -S2、在项目的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 :datausers border stylewidth: 100% el-table-column propid label用户ID/el-table-column el-table-column propusername label用户名/el-table-column el-table-column propphone label手机号码/el-table-column el-table-column propnickname label昵称/el-table-column el-table-column propemail label邮箱/el-table-column el-table-column propdescList label角色列表/el-table-column el-table-column label操作 template slot-scopescope el-button sizemini typeprimary查看/el-button el-button sizemini typewarning修改/el-button el-button sizemini typedanger clickdel(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 /stylevue项目打包部署npm run build