vue2.x+webpack快速搭建前端项目框架详解


Posted in Javascript onNovember 30, 2017

一、本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。下面是具体实操。

二、基本命令操作。

1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/

在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功。如下图所示:

vue2.x+webpack快速搭建前端项目框架详解

2.在使用npm之前,最好把镜像换成淘宝的,长久使用,跑一下命令:npm config set registry https://registry.npm.taobao.org,

替换成功后跑npm config get registry命令显示淘宝镜像路径的话就代表替换成功。

vue2.x+webpack快速搭建前端项目框架详解

3.第二步全局安装vue-cli,在命令窗口输入npm install -g vue-cli,然后跑vue -V出现版本号证明安装成功。

vue2.x+webpack快速搭建前端项目框架详解

4.开始生成项目,在本地硬盘找一个目录存放代码,然后打开命令行cd切换到相应的路径下,然后跑 vue init webpack Vue-Project(项目名称)

vue init webpack Vue-Project(项目名称)

vue2.x+webpack快速搭建前端项目框架详解

5.输入cd Vue-Project  然后安装依赖npm install, 如果平常时开发就跑npm run dev(本地开发跑代码),如果需要打包则跑npm run build。

vue2.x+webpack快速搭建前端项目框架详解

6.项目默认监听的是80端口,容易跟其他应用引起端口冲突,所以在项目下打开config文件夹,打开index.js,把端口改为8888,这样就避免冲突了,

vue2.x+webpack快速搭建前端项目框架详解

7.最后重新跑指令npm run dev   ,然后再地址栏输入http://localhost:8888,就会出现相应的页面。

vue2.x+webpack快速搭建前端项目框架详解

三、添加相应的框架以及依赖

1.引入sass预编译工具加快编码速度,跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比较难装的话可以换成cnpm来下载依赖,具体可百度下做法。

操作:

在components目录下新建一个header的目录,新建两个文件header.vue  header.scss,然后引入到app.vue中使用,因为vue讲的是模块化开发,所以我喜欢把样式跟组件放到一个文件夹里跟其他模块区分,

vue2.x+webpack快速搭建前端项目框架详解

App.vue:

vue2.x+webpack快速搭建前端项目框架详解

header.scss:

vue2.x+webpack快速搭建前端项目框架详解

这样就证明sass 是安装成功了。

 2.引入axios接口请求框架,跑命令npm install axios --save-dev,npm install qs;

 然后在src目录下新建一个http.js文件进行接口请求的相关配置,

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs';


var instance = axios.create({
 //baseURL: 'https://some-domain.com/api/',
 timeout: timeout,
 responseType: 'json', // default,
 //headers: {'apikey': 'foobar'},
 transformRequest:function(data,headers){
  //为了避免qs格式化时对内层对象的格式化先把内层的对象转为
  //由于使用的form-data传数据所以要格式化
  if (typeof data == 'string') {
  
   headers.post['Content-Type'] = "application/json; charset=utf-8";
  
  }
  else if(!(data instanceof FormData)){
  headers.post['Content-Type'] = "application/x-www-form-urlencoded";
  
   for(let key in data){
   if(data[key]===undefined){
    data[key]=null;
   }
   }
   data = Qs.stringify(data);
 }

  return data;
 }
});
export default instance; 

Vue.prototype.$http=instance;

在使用请求接口的时候直接可以这样用:(具体用法可以看下官方文档)

this.$http.get(url).then((res)=>{
})

3.引入elementUI,跟人感觉elementUI是比较好用的vue组件UI,很多东西不用自己去写,推荐使用,跑指令npm install element-ui --save,

然后在main.js中引入使用

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

当然也可以按需引入,想用什么组件就引入什么组件,不要全部引入,这样减少体积。

4.引入vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

安装:npm install vuex --save

具体使用这里不做详细介绍,感兴趣的可以看下中文官网:https://vuex.vuejs.org/zh-cn/。

Javascript 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
纯javascript版日历控件
Nov 24 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
浅谈Vue数据响应
Nov 05 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
Vue+Vux项目实践完整代码
Nov 30 #Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 #Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 #Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 #Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 #Javascript
微信小程序支付及退款流程详解
Nov 30 #Javascript
windows下更新npm和node的方法
Nov 30 #Javascript
You might like
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js验证表单第二部分
2006/11/25 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
Vue响应式原理详解
2017/04/18 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python 多线程的实例详解
2017/09/07 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
浅析PEP572: 海象运算符
2019/10/15 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
学雷锋月活动总结
2014/04/25 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
健康状况证明书
2014/11/26 职场文书
消防宣传标语大全
2015/08/03 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书