使用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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
jQuery操作动画完整实例分析
2020/01/10 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
环境工程专业个人求职信
2013/12/05 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
村庄绿化方案
2014/05/07 职场文书
个人年度总结报告
2015/03/09 职场文书
2015年财政局工作总结
2015/05/21 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
python开发的自动化运维工具ansible详解
2021/08/07 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python