详解用vue-cli来搭建vue项目和webpack


Posted in Javascript onApril 20, 2017

vue-cli

用vue-cli来搭建vue项目

第一步:全局安装vue-cli

sudo npm install vue-cli -g

第二步:初始化一个项目

vue init webpack-simple projectName

第三步:把文件切换到初始化的项目中

cd projectName

第四步:安装依赖

npm install

当然也可以用淘宝镜像cnpm来安装,这样快很多

cnpm install

第五步:运行

npm run dev

完成一个初始化vue项目

webpack

要开始一个vue项目,

那也必须要了解webpack

webpack是一个前端资源模块化管理和打包工具

 首先你可以建立很多个js,css文件,但是利用webpack就只需要在index.html那里引用一个js文件,也就是所谓的打包文件,不需要去引用所以的js,css文件

 第一步:全局安装webpack

sudo npm install webpack -g

第二步:建立一个package.json基础配置文件

npm init

第三步:安装webpack的依赖

npm install webpack --save-dev

第四步:一个项目里面的index.html文件

<html>

<head>

 <meta charset="utf-8">

</head>

<body>

 <script src="bundle.js"></script>

</body>

</html>

第五步:把需要的js,css文件单独写出来

//module.js

module.exports = 'It works from module.js.'

//entry.js

document.write('It works.')

document.write(required('./module.js'))

写完需要的js文件

第六步:打包entry.js文件到bundle.js文件中

webpack entry.js bundle.js

第七步:假设还有css文件

//style.css

body{

background:red

}

现在有了css文件也想要把css文件打包进去

第八步:把css文件也打包进去

修改entry.js文件

require("!style-loader!css-loader!./style.css") // 载入 style.css

document.write('It works.')

document.write(require('./module.js'))

第九步:需要用到loader,自然要安装

npm install css-loader style-loader

第十步:还需要再重新打包编译

webpack entry.js bundle.js

css的文件步骤很复杂,那么有更简单的办法不需要写的那么复杂

第十一步:建立一个配置js文件,webpack.config.js

//webpack.config.js 

var webpack = require('webpack')

module.exports = {

 entry: './entry.js',

 output: {

  path: __dirname,

  filename: 'bundle.js'

 },

 module: {

  loaders: [

   {

    test: /\.css$/,

     loader: 'style-loader!css-loader'

    }

  ]

 }

}

这个loaders:是一个解析器

test:就是需要解析模板的文件,是一个正则表达式

loader:是需要用什么方式去处理test所包含的文件,用xxx-loader去读取test的正则文件

第十二步:然后就可以把css文件打包的时候简单化了

require('./style.css')

再重新编译一下就可以了

第十三步:不想要一直编译,想实时监控,

webpack --watch

第十四步:也可以开一个静态web服务器,localhost,webpack-dev-server,全局安装

npm install webpack-dev-server -g

第十五步:运行webpack-dev-server:会实时监控

webpack-dev-server

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

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
js禁止浏览器的回退事件
Apr 20 #Javascript
vue-cli入门之项目结构分析
Apr 20 #Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 #Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 #Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 #Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 #Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 #Javascript
You might like
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP getName()函数讲解
2019/02/03 PHP
php的扩展写法总结
2019/05/14 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
留学自荐信的技巧
2013/10/17 职场文书
一年级班主任感言
2014/03/08 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
投标服务承诺书
2014/05/28 职场文书
建筑工地文明标语
2014/10/09 职场文书
五年级上册复习计划
2015/01/19 职场文书
给老婆的道歉信
2015/01/20 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫