1.项目搭建
npm install --global vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
my-project 是创建的项目名,后续可以更改
2.全局引入jquery
npm install jquery
下载好后,在build文件夹里找到webpack.base.conf.js
先引入变量 var webpack = require("webpack")
修改两处代码
主要代码: plugins: [
// 配置全局使用 jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
]
main.js中引入
import $ from 'jquery'
3.引入Element
如果创建的项目没有引入webpack,先引入
vue init webpack
安装element
npm i && npm i element-ui
main.js中引入
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'Vue.use(ElementUI)
4.引入bootstrap
这个。。其实没什么必要,也很麻烦,最简单的就是
index页面引入cdn,直接就可以用了,这个还不如element好使
5.$.http 请求
(1)打开命令行工具,进入项目目录,npm install vue-resource
(2)main.js里引用:import VueResource from 'vue-resource';
(3)开启插件:Vue.use(VueResource)
调用示例:
this.$http.post("xxx.php",{myName:"xxx",myPwd:"123456"},{emulateJSON: true})
.then(
(response)=>{
console.log(response);
},
(error)=>{
console.log(error);
}
);
$http.get 同post 就是没有红字的参数,红字参数emulateJSON:true 意思是 模拟一个JSON数据发送到服务器,这样才可以成功运行,.then中有两个function,第一个是成功回调,第二个是失败回调