详解使用vue脚手架工具搭建vue-webpack项目


Posted in Javascript onMay 10, 2017

对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可。但是,这并不算是一个完整的vue实际应用。在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目。

1.安装node环境

可以使用自带的终端cmd命令行工具;windows下推荐安装git bash,可以使用linux命令;

详解使用vue脚手架工具搭建vue-webpack项目

第一步检测是否安装node;没有安装node的同学请到官网下载安装https://nodejs.org/en/download/

安装成功后在命令行查看node版本,如果有说明安装成功。

2.安装vue脚手架工具vue-cli

大家在安装node的时候,会自动安装npm;

详解使用vue脚手架工具搭建vue-webpack项目

可以先行查看npm版本;

使用npm安装vue-cli:

npm install vue-cli -g

3.准备工作已经完毕,下面直接使用vue-cli初始化webpack项目;

vue init webpackyourprojectname(项目名)

详解使用vue脚手架工具搭建vue-webpack项目

中间会输入项目名称,项目描述,作者等信息;

一路回车

可以看到我们刚才创建的webpack项目已经建好了:

详解使用vue脚手架工具搭建vue-webpack项目

4.查看目录结构

详解使用vue脚手架工具搭建vue-webpack项目

安装依赖

$ npm install

国内有些包npm无法安装,可以使用cnpm安装

$ npm install

5.启动本地开发

npm run dev

详解使用vue脚手架工具搭建vue-webpack项目

本地node服务器已经跑起来了,端口为配置文件中的端口

详解使用vue脚手架工具搭建vue-webpack项目

6.配置路由

详解使用vue脚手架工具搭建vue-webpack项目

创建新的页面组件,将路由指向该.vue 文件

详解使用vue脚手架工具搭建vue-webpack项目

到此,使用vue-cli创建的vue项目基本可以上手开发了,恭喜!

详解使用vue脚手架工具搭建vue-webpack项目

7.打包上线

$ npm run build

详解使用vue脚手架工具搭建vue-webpack项目

看到build complete,证明打包成功;

观察目录结构,发现多了一个dist文件夹,这便是webpack打包后的文件,将改文件和后台商量,以什么形式放到服务器即可,上线成功。

详解使用vue脚手架工具搭建vue-webpack项目

啦啦啦~ 至此,我们vue项目算是初步跑起来了,后续会详解webpack配置,以及本地mock数据开发等文章,欢迎大家批评指正!

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

Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
node实现的爬虫功能示例
May 04 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
微信小程序 支付后台java实现实例
May 09 #Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 #Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 #Javascript
使用ES6语法重构React代码详解
May 09 #Javascript
JQuery实现定时刷新功能代码
May 09 #jQuery
React.js中常用的ES6写法总结(推荐)
May 09 #Javascript
js上传图片预览的实现方法
May 09 #Javascript
You might like
星际实力自我测试
2020/03/04 星际争霸
用缓存实现静态页面的测试
2006/12/06 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python实现动态数组的示例代码
2019/07/15 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
八一建军节营销活动方案
2014/08/31 职场文书
实习证明格式范文
2015/06/16 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers