摘要:vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成 vue 和 webpack 的项目模板,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 目录,这个就是打包后的文件,直接拷贝到服务器部署就可以了