手把手教你如何搭建一个基于webpack的vue项目

时间：2022-11-08 17:15:59

最近这两年，越来越多的框架兴起，这方便了各位开发者，也提升了开发效率。其中比较热门的前端框架则是react和vue。

这里，介绍一下如何搭建一个vue项目。

多说一句，react的UI框架可以选择蚂蚁金服的Ant Design，vue则有两个选择，iView和elementUI

附上链接地址：

Ant Design：点击打开链接；

iView：点击打开链接；

elementUI：点击打开链接；

最开始，我搭建项目的时候，到处百度方法，网上的方法千百种，各有各的好，也有不好。好的是，思路清晰，给我启发

不好的是，长篇大论，不容易找准中心点。我想，对于大多数初学者或者第一次接触vue的人，想要的仅仅是如何快速搭建

起一个项目，能用能实现项目需求，而不是给你说一大堆框架性能怎么样怎么样，框架源码哪里比其他框架好，这些我觉得

基本都是废话，对于初学者，说了你觉得他能一下就懂了？再说，框架是要自己钻研的，不是人家说了就懂了。所以，我在

这，写一篇对初学者而言，简单易懂、快速上手地搭建一个基于webpack的vue项目。

正式步骤：

1、安装node、npm、webpack

 node的安装必不可少，相信不用我多介绍，既然是基于webpack的项目，那么webpack也需要安装。

2、安装vue

 vue项目怎么能不安装vue框架呢，对吧。命令如下：

npm install vue
 全局安装vue官方脚手架。命令如下： 
npm install -g vue-cli 


3、创建一个基于webpack的项目（projectName为项目文件夹名）。命令如下：

vue init webpack projectName
 4、进入项目文件夹，安装依赖。命令如下： 
cd project
npm install
 5、安装UI框架。命令如下：


 iView：

npm install iview
 elementUI： 
npm install element-ui
6、安装axios(发送ajax请求需要)。命令如下： 
npm install axios
 由于国外环境下载较慢，推荐使用淘宝镜像。命令如下： 
npm install --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

至此，需要用到的基本上安装完了，但是还需要进行配置：

在main.js文件中引入iView或者（elementUI）和其相应的css文件。个人建议在src/assets下新建一个styles文件夹

将iview.css文件拷贝于此，方便引用。

引用iView和css文件（iView可自己随意命名，建议语义化）

import iView from 'iview'
import './assets/styles/iview.css'
Vue.use(iView);

 还有最重要的一点，就是这个项目只是静态的，项目上是需要我们发送请求，获取数据的，这里，我也进行了简单的整

 理，希望能有所用。

首先，在src/assets下新建一个libs文件夹，用于存放js文件。为了方便管理，博主用reqHttpUrl.js存放请求，

path.js文件用于存放接口。

path.js配置如下：

'use strict';
let initPath = '/';
let path = {
  req: {
    reqOne: initPath + '/req/req/req'
  }
};
export default path
其中：req/req/req是后端接口，reqOne
是接口名，可自行修改，至于req则是接口分类名。

reqHttpUrl.js配置如下：

'use strict';
import axios from 'axios'
import PATHURL from './path'
function getReqAjax (_url, _data, _success, _error) {
  axios.get(_url, {
    params: _data
  })
    .then(function (response) {
      if (response.data.code !== 200) {
        if (_error) { _error(response) }
        if (response.data.code === 403) {
          window.location.href = response.data.data
        }
      } else {
        _success(response.data)
      }
    })
    .catch(function (error) {
      if (_error) { _error(error) }
    })
}

function postReqAjax (_url, _data, _success, _error) {
  axios({
    method: 'post',
    url: _url,
    data: _data,
    contentType: 'application/json'
  })
    .then(function (response) {
      if (response.data.code !== 200) {
        if (_error) { _error(response) }
        if (response.data.code === 403) {
          window.location.href = response.data.data
        }
      } else {
        _success(response.data)
      }
    })
    .catch(function (error) {
      if (_error) { _error(error) }
    })
}

let dataJson = {
  req: {
    reqOne: function (data, _success) {
      postReqAjax(PATHURL.req.reqOne, data, function (msg) { _success(msg) }, function (msg) {})
    }
  }
};
export default dataJson

此文件，首先就要引入path.js接口文件，用一个变量（这里是PATHURL）保存。

其中，getReqAjax是get请求，postReqAjax是post请求，简单封装了一下。

datajson则是到时请求需要用到的。datajson下面的req是请求分类，datajson下面的req下面的reqOne是请求名。

PATHURL.req.reqOne则是path.js文件接口，需要那个接口就调用哪个。

好了，现在就是到了如何调用了，在需要发送请求的vue文件中，收件引用datajson：

import dataJson from '../../assets/libs/reqHttpUrl'
 路径自己定义。在方法里面调用： 
dataJson.req.reqOne(argumentData, function (msg) {})

 这里的req是reqHttpUrl.js文件下请求分类名，reqOne是请求名，argumentData是需要传给后台的参数，

可为空、数组、对象、字符串等等。

至此，这个vue项目基本搭建完了，也能发送请求，至于请求和接口我进行了分开管理，个人觉得比较方便，若各位有

不同的意见和更好的方法，欢迎留言，共同探讨。

PS：忘了写如何启动项目，虽然有点多此一举，但是没有不够完善

        index配置文件，dev下面的useEslint设为false（代码规范检验）

npm run dev

  

标签：

相关文章