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


Posted in Javascript onJanuary 14, 2019

最近更新了webpack配置详解,可移步vue-cli webpack详解

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

1.安装node环境

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

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

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

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

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

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

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

可以先行查看npm版本;

使用npm安装vue-cli:

npm install vue-cli -g

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

vue init webpackyourprojectname(项目名)

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

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

一路回车

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

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

4.查看目录结构

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

安装依赖

$ npm install

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

$ cnpm install

5.启动本地开发

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

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

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

6.配置路由

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

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

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

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

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

7.打包上线

$ npm run build

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

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

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

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

啦啦啦~ 至此,我们vue项目算是初步跑起来了,后续会详解webpack配置,以及本地mock数据开发等文章,欢迎大家批评指正!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 #Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 #Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 #Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 #Javascript
vscode下vue项目中eslint的使用方法
Jan 13 #Javascript
jQuery实现的中英文切换功能示例
Jan 11 #jQuery
JavaScript寄生组合式继承原理与用法分析
Jan 11 #Javascript
You might like
mysql数据库差异比较的PHP代码
2012/02/05 PHP
python进程与线程小结实例分析
2018/11/11 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
导购员的岗位职责
2014/02/08 职场文书
财务主管岗位职责
2014/02/28 职场文书
演讲稿格式
2014/04/30 职场文书
社区文化建设方案
2014/05/02 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
党支部特色活动方案
2014/08/20 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
户外亲子活动总结
2015/05/08 职场文书
世界名著读书笔记
2015/06/25 职场文书
酒店厨房管理制度
2015/08/06 职场文书
初一数学教学反思
2016/02/17 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA