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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
微信小程序-form表单提交代码实例
Apr 29 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
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现递归的三种基本方式
2020/07/04 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
python中urllib模块用法实例详解
2014/11/19 Python
低版本中Python除法运算小技巧
2015/04/05 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
浅析Python四种数据类型
2018/09/26 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
教师自荐信范文
2013/12/09 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
泰山导游词
2015/02/02 职场文书
入党积极分子考察意见
2015/06/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
python playwright 自动等待和断言详解
2021/11/27 Python