#VUE CLI 脚手架的安装及初识脚手架（一）

2024-05-26 10:33:52

目录

vue cli

安装vue cli

cli是什么？

1.CLI英文为Command-Line Interface,翻译为命令行工具，通俗来讲为脚手架。

2.使用vue-cli可以快速搭建Vue开发环境（你所需要构建项目的基础文档闭包）以及webpack配置

3.cli的版本5.0

安装Vue CLI

可以用window系统的cmd命令行打开，也可以直接在你创建好的文件夹的vscode终端打开

用命令行和在vscode终端都是一样的命令语句。

接下来，就开始说cli的安装步骤

先说一下命令行cmd转到指定文件夹

D:\>cd /d 盘符:文件夹名

C:\Users\xxxx>e:
E:\>cd /d 盘符:文件夹名

第一步（仅第一次执行）：全局安装@vue/cli

npm install -g@vue/cli

(备注：在此之前如果下载较慢请配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org)

第二步：切换到你要创建项目的目录，然后用命令行创建目录

vue create xxxx

选择你想要的vue版本，目前选择vue2

vue_test 下开始创建demo项目，下载完毕出现如下目录

因为脚手架内部的文件有一个现有hello world文件，所以我们直接运行一下看看效果

第三步：启动项目

npm run serve

注意：一定要在你要运行的项目上的集成终端打开，否则会报错-4058，路径还是要在你所创建的demo下运行 npm run serve

运行完毕就会出现网址，将网址复制到谷歌浏览器中打开。

此时，你的脚手架就安装完毕并正常运行了。

注意：vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webbpack配置，请执行：vue inspect > output.js

#VUE CLI 脚手架的安装及初识脚手架（一）相关推荐

vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
Vue CLI配置与安装
文章目录一.关于Vue CLI 安装Node.js 安装Vue CLI 创建Vue CLI项目启动项目停止服务重启服务二. Vue CLI项目结构关于.vue视图文件关于路由配置关于r ...
windows系统下 VUE cli手脚架环境安装
1.安装 node.js环境 (cmd命令工具里输入 node -v 检测是否安装成功) 2.安装VUE 全局环境 npm install --global vue-cli (cmd命令工具里面安装 ...
scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
vue资料整理: scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？
是css 的预编译. 使用步骤: 第一步:先装 css-loader.node-loader.sass-loader 等加载器模块第二步:在 build 目录找到 webpack.base.conf ...
前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
Vue脚手架的使用（Vue CLI）
一.什么是脚手架: CLI是Command-Line interface,翻译为命令行界面.Vue CLI是一个官方发布的Vue.js项目脚手架,它可以快速搭建Vue开发环境以及对应的webpack配 ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...

最新文章

热门文章