详解如何使用vue-cli脚手架搭建Vue.js项目


Posted in Javascript onMay 19, 2017

1. 前言

vue-cli 一个简单的构建Vue.js项目的命令行界面

整体过程:

$ npm install -g vue-cli 
$ vue init webpack vue-admin 
$ cd vue-admin 
$ npm install 
$ npm run dev

后面分步说明。

2. 安装

前提条件,Node.js >=4.x版本,建议使用6.x版本。npm版本 > 3.x

全局安装vue-cli

$ npm install -g vue-cli

详解如何使用vue-cli脚手架搭建Vue.js项目

详解如何使用vue-cli脚手架搭建Vue.js项目

3. 使用

$ vue init <template-name> <project-name>

vue官方提供了多个打包工具版本的模版。我们可以使用vue list命令查看,当前可以使用的模版。

$ vue list

详解如何使用vue-cli脚手架搭建Vue.js项目

我们在这里,使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离

$ vue init webpack vue-element-admin

详解如何使用vue-cli脚手架搭建Vue.js项目

之后,在E:\project文件夹下面,会有刚初始化的构建的项目vue-element-admin

详解如何使用vue-cli脚手架搭建Vue.js项目

4. 运行结果

项目基础结构已经搭建好了,现在来启动它。

进入项目文件:

$ cd vue-element-admin

安装依赖:

中国行情原因,直接安装,有时候会失败。我们一般使用npm的淘宝镜像cnpm。

先安装cnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后,使用:

$ cnpm install

你直接安装也可以的:

$ npm install

运行:

$ npm run dev

详解如何使用vue-cli脚手架搭建Vue.js项目

启动之后,自动打开默认浏览器

详解如何使用vue-cli脚手架搭建Vue.js项目

之后,就可以进行本地开发,实时预览开发效果。

5. 打包部署

项目开发完成之后,可以使用npm run build进行打包工作

$ npm run build

打包完成之后,会生成dist文件夹,项目上线时候,只需要将dist文件夹放到服务器就行了。

6. 项目结构

详解如何使用vue-cli脚手架搭建Vue.js项目

Javascript 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
小程序云开发之用户注册登录
May 18 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
angularjs封装$http为factory的方法
May 18 #Javascript
bootstrap表单示例代码分享
May 18 #Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 #Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 #Javascript
微信小程序中input标签详解及简单实例
May 18 #Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 #Javascript
JavaScript运动框架 多值运动(四)
May 18 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP chop()函数讲解
2019/02/11 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
微信小程序实现拖拽功能
2019/09/26 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python中取整的几种方法小结
2017/01/06 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Django学习之文件上传与下载
2019/10/06 Python
详解Django配置优化方法
2019/11/18 Python
Python celery原理及运行流程解析
2020/06/13 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
异步传递消息系统的作用
2016/05/01 面试题
《第一次抱母亲》教学反思
2014/04/16 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
办公用房租赁协议书
2014/11/29 职场文书
财务稽核岗位职责
2015/04/13 职场文书
大学生实习证明
2015/06/16 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android