使用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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
js单词形式的运算符
May 06 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php单例模式示例分享
2015/02/12 PHP
PHP chr()函数讲解
2019/02/11 PHP
js 可拖动列表实现代码
2011/12/13 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python写xml文件的操作实例
2014/10/05 Python
微信跳一跳python代码实现
2018/01/05 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Django缓存系统实现过程解析
2019/08/02 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python如何实现定时器功能
2020/05/28 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
给民警的表扬信
2014/01/08 职场文书
工地安全检查制度
2014/02/04 职场文书
房屋继承公证书
2014/04/10 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸