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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
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
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
js判断是否是手机页面
2017/03/17 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
跟老齐学Python之list和str比较
2014/09/20 Python
Python执行时间的计算方法小结
2017/03/17 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python3人脸识别的两种方法
2019/04/25 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
信息服务专业毕业生求职信
2014/03/02 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题