vue踩坑_cli_环境搭建，jquery，$http请求配置以及element组件引入

最新推荐文章于 2022-03-11 16:29:35 发布

Mobius_zzz

最新推荐文章于 2022-03-11 16:29:35 发布

阅读量529

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mobius_z/article/details/79419831

本文介绍如何从零开始搭建Vue项目，并逐步引入jQuery、Element UI等常用库，实现快速开发。涵盖项目初始化、全局引入库文件及HTTP请求处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，第一个是成功回调，第二个是失败回调