Vue安装脚手架 vue-cli

简介: Vue安装脚手架 vue-cli

Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)

在安装脚手架之前我们还需要安装 Node.JS  和  npm

全局安装 vue-cli 【初次安装】:

首先打开命令行 输入 npm install -g @vue/cli 再按回车键 安装脚手架

安装命令行:

npm install - g @vue / cli

出现 added xxx packages in xxs 表示安装成功

同时也可以输入 vue -V 查看当前脚手架的版本号

查看命令:

vue - v

:vue-cli 只需要安装一次即可 以后再创建 vue 项目时 就不需要再重新安装了。

1.创建vue项目

首先我们要准备好一个目录 用于存放 Vue 项目 然后在目录中打开命令行。

在命令行中输入 vue create 项目名 再按回车键 创建 Vue 项目 项目名可以自定义

创建项目名称:

vue create

:Vue 项目名称不允许使用大写字母 否则会出现以下报错 另外也不允许用中文名称 文件路径尽量也是英文的。

报错内容:

Invalid project name: "vueTest"

Warning: name can no longer contain capital letters

之后会提示你选择安装 vue2 或 vue3 版本 也可以选择自定义创建项目

babel 指的是:由于浏览器只能识别 ES5 的标准,对 ES6 、TS、JSX 都不识别,而 babel 就是用来将这些浏览器不识别的内容转为 ES5 的代码,使浏览器能够正常运行。

eslint 指的是:语法效验工具,用于检查代码是否符合开发规范

如果现在选择安装 vue2 或 vue3 的版本 则直接开始搭建项目 并且生成的项目中只会安装 babel 和 eslint

显示以下内容表示安装成功:

如果选择自定义创建项目,那么还需要选择一些配置 :

备注:按空格键可以选择或取消 按 a 键选择所有 按 i 键反选 按回车键 进入下一步

Vue CLI v5.0.8

? 请选择配置项: 手动选择配置项

? 检查您的项目所需要的配置项:按 空格键 可以选择或取消,按 a 键选择所有,按 i 键反选,按 回车键 进入下一步。

( ) Babel                                   是否安装 语法编译器,将 ES6 => ES5

( ) TypeScript                              是否支持 typescript

( ) Progressive Web App (PWA) Support       是否支持 PWA

( ) Router                                   是否安装 vue-router

( ) Vuex                                      是否安装 vuex

( ) CSS Pre-processors             是否安装 CSS 预处理器

( ) Linter / Formatter                  是否安装 代码风格检查、格式效验

( ) Unit Testing                           是否安装 单元测试

( ) E2E Testing                           是否安装 E2E 测试

:接下来会根据你选择的配置项提示一些信息 选择的配置项不同 提示的信息也不同。

原创作者:吴小糖

创作时间: 2023.4.18

相关文章
|
14天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
82 1
|
25天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
40 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
39 1
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1067 0
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
54 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
49 1