手把手教你如何搭建一个基于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