详解如何使用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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python获得图片base64编码示例
2014/01/16 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
如何在Python对Excel进行读取
2020/06/04 Python
大学总结自我鉴定
2014/01/18 职场文书
接受捐赠答谢词
2014/01/27 职场文书
药品业务员岗位职责
2014/04/17 职场文书
安全保证书范文
2014/04/29 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
质量负责人任命书
2014/06/06 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
房屋授权委托书范本
2014/10/07 职场文书
干部作风建设工作总结
2014/10/29 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
银行催款通知书
2015/04/17 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
大学军训口号大全
2015/12/24 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技