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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
javascript各种复制代码收集
Sep 20 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
ES6新增的数组知识实例小结
May 23 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
实用函数10
2007/11/08 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php读取本地json文件的实例
2018/03/07 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
应届生自我鉴定
2013/12/11 职场文书
产品质量承诺范本
2014/03/31 职场文书
股份合作协议书
2014/04/12 职场文书
2014年双拥工作总结
2014/11/21 职场文书
处级干部考察材料
2014/12/24 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
python编程实现清理微信重复缓存文件
2021/11/01 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS