详解用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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
文件上传类
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JS常用函数使用指南
2014/11/23 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
Python Tkinter基础控件用法
2014/09/03 Python
Python中for循环控制语句用法实例
2015/06/02 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
调解员先进事迹材料
2014/02/07 职场文书
销售主管岗位职责
2014/02/08 职场文书
青年文明号创建承诺
2014/03/31 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
python实现Nao机器人的单目测距
2021/09/04 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL