详解使用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的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
javascript如何创建对象
Aug 29 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
微信小程序 支付后台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
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php提交post数组参数实例分析
2015/12/17 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Django框架模板用法入门教程
2019/11/04 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
交通文明倡议书
2014/05/16 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
校园音乐节目广播稿
2015/08/19 职场文书