使用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的replace方法详细介绍
Nov 09 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
webpack-mvc 传统多页面组件化开发详解
May 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
一个php导出oracle库的php代码
2009/04/20 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php实现的验证码文件类实例
2015/06/18 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
ext jquery 简单比较
2010/04/07 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
js Math 对象的方法
2013/09/01 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
应用电子技术专业个人求职信
2013/09/21 职场文书
房地产还款计划书
2014/01/10 职场文书
新郎结婚保证书
2015/02/26 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android