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

相关文章
|
1天前
|
JavaScript
vue 动态绑定方法
vue 动态绑定方法
6 0
|
1天前
|
JavaScript
vue 手动/局部刷新组件
vue 手动/局部刷新组件
5 0
|
1天前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
6 0
|
1天前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
13 4
|
1天前
|
JavaScript
vue 组件封装 | s-scroll 页面滚动动画
vue 组件封装 | s-scroll 页面滚动动画
6 0
|
7月前
|
JavaScript
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
|
JavaScript 数据可视化 前端开发
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
200 0
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
|
1天前
|
JavaScript 容器
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
8 0
|
1天前
|
JavaScript
Vue 组件封装 | 给汉字注音(带声调),内含汉字转拼音(带声调/不带声调),获取汉字首字母的方法
Vue 组件封装 | 给汉字注音(带声调),内含汉字转拼音(带声调/不带声调),获取汉字首字母的方法
8 0
|
1天前
|
JavaScript
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
15 7