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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
jQuery参数列表集合
Apr 06 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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面向对象
2012/02/22 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
javascript 事件绑定问题
2011/01/01 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
jquery延迟对象解析
2016/10/26 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
flask-socketio实现WebSocket的方法
2018/07/31 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python 画图 图例自由定义方式
2020/04/17 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
局域网标准
2016/09/10 面试题
《童趣》教学反思
2014/02/19 职场文书
奥运会口号
2014/06/13 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
法制工作总结2015
2015/07/23 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android