VUE脚手架具体使用方法


Posted in Javascript onMay 20, 2019

什么是vue脚手架?

他是一个快速构建 vue 项目的工具,通过他,我们可以将 vue 所需要的文件安装完成。

vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,

相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。

安装 vue-cli 脚手架

安装脚手架需要用 cnpm( 淘宝镜像 ) 安装 , 直接用 pip 安装 会失败 , 安装 cnpm 命令如下 :

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

VUE脚手架具体使用方法

安装成功输入 :cnpm-V, 查看 cnpm 是否安装成功 ,

注意 V 一定要是大写 .

安装 vue 脚手架命令去下 :

cnpm install -g vue-cli 安装成功是下面这样的

VUE脚手架具体使用方法

然后使用 vue-V 查看是否安装成功.

VUE脚手架具体使用方法

如果安装失败可能是 cnpm 版本过低 , 更新 cnpm 的版本即可 .

cnpm 更新必须要手动更新,更新命令如下:

npm install -g npm

使用 vue init webpack myitem    这条命令,就可以创建一个 vue

的脚手架。

解释一下命令 :

vue init 即使用vue-cli初始化一个项目。

webpack 是说使用webpack作为构建工具。

firstvue 是项目名称。 注意: 项目名称推荐使用小写字母。

安装时会暂停一下 , 你点击 Enter 进行下一步就可以了 ,

Install vue-router?  是否安装 vue 的路由 ? 如果你要做前后端的项目的话 , 就要选择 yes, 建议选择 yes.

Pick an unit tester jest  是否单元测试

其他的更具自己的需求进行选择

VUE脚手架具体使用方法

安装成功会显示出这两个命令 :

VUE脚手架具体使用方法

这个时候进入你新建的 vue 项目的目录下 , 你会发现他新建了一个 mytime 的文件夹

VUE脚手架具体使用方法

在运行项目前 , 需要安装依赖 , 命令如下:

cnpm install

VUE脚手架具体使用方法

Vue 需要在黑窗口启动一下 .

启动之前进入 vue 的项目根目录下 . 输入命令 :

cd mytime  进入根目录

npm run dev  启动项目

启动成功效果如下 :

VUE脚手架具体使用方法

复制路由 : http://localhost:8081 , 在谷歌浏览器打开 , 会显示页面 :

VUE脚手架具体使用方法

这个时候 , 一个完整的 vue 脚手架成功搭建成功 .

把你新建的 vue 项目拖拽到你的编程软件的根目录下 :

会出现这些文件 , 这个时候 , 你就可以进行编辑了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
Vue CLI2升级至Vue CLI3的方法步骤
May 20 #Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 #Javascript
微信小程序上传文件到阿里OSS教程
May 20 #Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 #Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 #Javascript
React如何实现浏览器打印部分内容详析
May 19 #Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
You might like
解析isset与is_null的区别
2013/08/09 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php构造函数与析构函数
2016/04/23 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
15分钟上手vue3.0(小结)
2020/05/20 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
给校长的建议书300字
2014/05/16 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
十二生肖观后感
2015/06/12 职场文书
德劲DE1108畅想
2021/04/22 无线电
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript