VUE脚手架具体使用方法

网络编程 2024/11/14 佚名

3 1 2

什么是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

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

注意 V 一定要是大写 .

安装 vue 脚手架命令去下 :

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

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

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

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

npm install -g npm

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

的脚手架。

解释一下命令 :

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

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

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

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

Install vue-router"text-align: center">

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

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

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

cnpm install

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

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

cd mytime 进入根目录

npm run dev 启动项目

启动成功效果如下 :

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

VUE,脚手架使用,VUE,脚手架

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“VUE脚手架具体使用方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月14日

VUE脚手架具体使用方法

nodejs中实现用户注册路由功能

Vue CLI2升级至Vue CLI3的方法步骤

评论“VUE脚手架具体使用方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接