vue脚手架是什么?

袁志蒙 1385次浏览

摘要:vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成 vue 和 webpack 的项目模板,Vue是一个用于构建用户界面的渐进式框架。它是可以自底向上逐层应用...

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

CLI:

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


Node.js:

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 GoogleV8 引擎,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,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成 vuewebpack 的项目模板。

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 目录,这个就是打包后的文件,直接拷贝到服务器部署就可以了


随机内容

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~