webpack+vue2构建vue项目骨架的方法


Posted in Javascript onJanuary 09, 2018

前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架。虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架,但是了解原理我觉得还是很重要的,所以这篇文章主要就写webpack与vue构建一个基础项目。前提是已经安装了nodejs。

整个项目需要通过npm安装的依赖

css : style-loader、css-loader、sass-loader、node-sass

 js:babel-core 、babel-loader、babel-preset-es2015

webpack:webpack、webpack-dev-server

 vue:vuer 、vue-loade、vue-html-loader、vue-template-compiler

新建一个项目的目录

我们首先需要新建一个目录myApp用来放我们的项目,在终端里面进入这个项目,然后开始初始化项目。

初始化项目

$ npm init

初始化项目的时候,如果没有特别需要,直接按“回车键”就可以。项目初始化完成后,就会生成一个packge.json文件主要存放项目依赖目录和配置项目启动命令。

安装依赖

$ npm i style-loader --D

使用npm安装依赖的时候,我们会在最后加上“--D”,因为加“--D”后会在packge.json里面留上记录。如果我们将项目在其他系统打开时,会发现开发的时候通过npm安装的依赖不能用了,这是因为存在系统兼容性。而如果开发项目的时候安装依赖加上“--D”,项目里面的node_modules就不需要拷贝过去,而打开项目前,我们只需要通过npm安装所有依赖就可以了。

$ npm i

配置webpack.config.js文件

webpack所有的配置都在webpack.config.js文件里面,所以初始化项目后,我们需要新建一个webpack.config.js文件然后配置。由于上次已经专门写过webpack的基本配置,这儿就不重复了,直接贴上我的配置代码:

module.exports = {

 entry: './src/main.js',

 output:{

  path: __dirname + '/dist/',

  filename: 'bundle.js'

 },

 devtool:'source-map',

 devServer:{

  // 主要改变项目的根目录

  contentBase: __dirname + '/dist/',

  port:8080,

  inline:true

 },

 module:{

  loaders:[

   {test:/\.css$/,loader :'style-loader!css-loader'},

   {test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},

   { test: /\.vue$/, loader: 'vue-loader' }

  ]

 },

 //vue文件想要解析必须要要加上这句才能成功

 resolve: { alias: { 'vue': 'vue/dist/vue.js' } }

}

配置package.json

package.json里面需要配置的主要时项目启动命令,一个开发模式的start和打包项目build。

webpack+vue2构建vue项目骨架的方法

启动项目

$ npm start

打包项目

$ npm run build

整个项目的目录

webpack+vue2构建vue项目骨架的方法

src:我们开发的源文件都放在这个目录里面

components:用来放所有的组件

styles:存放所有的样式文件

utils:存放所有需要自己写的方法函数

app.vue:所有的vue文件的入口文件

main.js:整个项目的js入口文件

index.html:这个文件可以放在真个项目的根目录myApp里面,也可以放在webpack打包的生成的目录dist里面,如果是放在根目录则webpack.config.js里面的contentBase: __dirname ,如果在dist里面则contentBase: __dirname + '/dist/'。主要改变项目的服务根目录的位置,就是我们localhos:8080打开时浏览器显示的目录。(经过测试放在打包生成的dist目录会好些,主要在开发模式可以实现实时更新。这个可能不太准,后期再测试后进行修改)

index.html文件代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>webpack+vue</title>
</head>
<body>
 <div id="app"></div>
 <script src="./bundle.js"></script>
</body>
</html>

main.js文件代码

//引入vue框架<br>
//import是es6的写法,其实和var Vue = require('vue')是相同的意义<br>import Vue from 'vue';<br>
//引入App.vue文件,这个文件也是vue所有组件的入口,我们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
 el:'#app',
 components: {App},<br>//主要目点就是将App追加到“#app”里面去
 render: h => h(App)
}) 
App.vue文件代码
<template>
  <div>Hello VueJS!</div>  
</template>
<script>
 export default{
   name:"app"
  }
</script>

到这儿整个项目基本上就完成了基本的结构,在浏览器输入:localhost:8080,就可以看到显示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
JavaScript修改css样式style
Apr 15 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
Underscore源码分析
Dec 30 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
JS模拟实现京东快递单号查询
Nov 30 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 #Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 #Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
js 替换
2008/02/19 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python单例模式的两种实现方法
2017/08/14 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
大一学生的职业生涯规划书范文
2014/01/19 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
大学学风建设方案
2014/05/04 职场文书
文明之星事迹材料
2014/05/09 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
个人借款协议书范本
2014/11/17 职场文书
人事专员岗位职责
2015/02/03 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android