详解用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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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中变量及部分适用方法
2008/03/27 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
js函数般调用正则
2008/04/08 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python中requests库session对象的妙用详解
2017/10/30 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python实现按关键字筛选日志文件
2019/12/24 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
大学生感恩父母演讲稿
2014/08/28 职场文书
特此通知格式
2015/04/27 职场文书
大国崛起英国观后感
2015/06/02 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js