vue脚手架是什么?

在了解 vue脚手架 是什么之前,要先了解其他的一些概念:

CLI: 命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)。

Node.js: Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好,简单的说就是运行在服务端的 JavaScript。

NPM: NPM的全称是 Node Package Manager,是一个 NodeJS 包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准,管理前端各种依赖。

设置淘宝镜像:
npm config set registry https://registry.npm.taobao.org

验证镜像
npm config get registry

设置npm默认安装目录及缓存目录
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

脚手架: 在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。

vue脚手架: vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成 vue 和 webpack 的项目模板。

Vue是一个用于构建用户界面的渐进式框架。它是可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或者现有的项目进行整合。 另一方面当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动,接下来将介绍Vue中的一个重要内容vue-cli,就有一定的参考价值,希望对大家有所帮助。

vue脚手架的简单使用

1.安装vue脚手架:

npm install -g vue-cli  

添加vue命令到path环境变量
我的电脑-属性-高级系统设置-环境变量-path-添加:

D:\nodejs\node_global

2.通过vue脚手架创建一个项目:

vue init webpack 项目名

webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。

3.运行vue脚手架项目:

进入到项目的根目录,然后在项目根目录执行:

npm start

4.访问vue项目:

浏览器打开启动后的地址,如:

http://localhost:8080/

5.vue-cli项目打包及部署:

进入到项目的根目录,然后在项目根目录执行:

npm run build

运行完成之后,会出现一个 dist 目录,这个就是打包后的文件,直接拷贝到服务器部署就可以了

Vue
  • 作者:李仁密《联系作者》
  • 发表时间:2024-01-22 16:26
  • 板权声明:自由转载-非商用-非衍生-保持名(创意共享3,0许可证)
  • 公众号转酸:请在文末添加作者公众号二组码

Comments

Matt
How artistic!
Elliot Fu

This has been very useful for my research. Thanks as well!

Jenny Hess
Elliot you are always so right :)
Joe Henderson
Dude, this is awesome. Thanks so much