使用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中的数字与字符串相加实例分析
Aug 14 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
手机号码,密码正则验证
Sep 04 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
Node.js的特点详解
Feb 03 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
vue实现分页的三种效果
Jun 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中文件下载功能实现超详细流程分析
2012/06/13 PHP
php生成静态页面的简单示例
2014/04/17 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
Javascript学习指南
2014/12/01 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Django发送邮件功能实例详解
2019/09/02 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
广播体操口号
2014/06/18 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
个人合作协议范本
2015/08/06 职场文书