vue-cli快速搭建项目配置

zhaojingj_

已于 2022-02-21 14:07:26 修改

阅读量2.5k

点赞数 4

分类专栏： vue 文章标签： vue

于 2020-05-20 15:18:03 首次发布

本文链接：https://blog.csdn.net/zhaojingj_/article/details/106235197

版权

本文介绍了如何使用vue-cli快速搭建Vue项目，包括环境准备、创建新项目、手动配置项的选择，如是否使用history router、预处理器的选择、代码检测工具、单元测试等，帮助开发者高效初始化项目。

摘要由CSDN通过智能技术生成

环境准备

在搭建新的vue-cli项目之前，要先安装node，npm，vue-cli

创建新项目

进入项目将要存放的目录
创建项目

 vue create 项目名称

选择手动配置/默认配置

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)       //默认配置
  Manually select features 		//手动配置

手动配置项

选择需要的包

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection //space选中，a全选，i反选)
❯◉ Babel         //转码器，可将ES6转为ES5
 ◯ TypeScript

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhaojingj_

关注关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-cli搭建项目步骤（包括项目目录说明）及基本配置

lightoneone的博客

11-21

771

vue-cli搭建项目步骤（包括项目目录说明）及基本配置

vue-router 的使用与基础篇解析

黑山老妖的小站

07-23

1616

开篇源码仓库为：https://gitee.com/wx_142da4773a/vue-router-demo.git 基础篇起步可以自己创建项目也可以从我的gitee上拉取代码进行练习~ 我采用了vue create 来创建项目并选择了router特性。选择过程会询问以下问题 vue create vue-router-demo 创建一个vue项目请选择预置Please pick a preset: (Use arrow keys) default (babel, eslint) Manua

参与评论您还未登录，请先登录后发表或查看评论

vue-cli新项目的配置

m0_53521906的博客

09-25

一。node -v查看node版本二。npm install -g vue-cli 安装vue-cli 三。vue 查看vue相关信息如果显示不是内部命令，需要添加环境变量的话，方法如下： npm config get prefix 查看npm路径>> 复制得到的路径信息，去到桌面>右键计算机>属性>高级系统设置>环境变量在系统变量中新建变量NPM，变量值为之前复制的路径信息，一般是...

使用Vue CLI快速搭建和配置你的Vue项目

最新发布

weixin_52938153的博客

05-21

466

Vue CLI 是 Vue.js 官方提供的一个标准工具，用于快速搭建和管理 Vue.js 项目。它提供了一个基于 Node.js 的命令行界面，帮助开发者初始化、开发、测试和部署 Vue 项目。按照提示选择需要的特性，如 Babel、Router、Vuex 等。Vue CLI 支持通过插件扩展功能。你可以创建自己的 Vue CLI 插件来扩展功能。创建一个新的 npm 包。在包内创建generator文件夹，并添加index.js文件。

Vue2.0教程（一） vue脚手架安装

燃燃的大尾巴

07-25

824

vue2脚手架

webpack4+Vue搭建自己的Vue-cli项目过程分享

10-18

使用Vue-cli可以快速搭建起一个Vue开发环境，而不需要从头配置Webpack等构建工具。在构建Vue项目之前，我们需要具备一些前置知识，例如熟悉Webpack 4的基础使用和Vue项目的基本骨架搭建。这里需要注意的是，虽然...

使用vue-cli4.0快速搭建一个项目的方法步骤

10-15

本文将详细介绍使用 vue-cli 4.0 快速搭建项目的方法步骤。首先，关于 vue-cli 的安装和升级。vue-cli 4.0 依赖于 Node.js 的版本，最低需要 Node.js 8.9 版本，而推荐的版本为 8.11.0 或更高。因此，在升级 vue-...

详解vue-cli下ESlint 配置说明

10-18

Vue CLI 是一个强大的工具，用于快速搭建 Vue.js 项目。ESLint 是一款静态代码分析工具，可以帮助开发者遵循一定的编码规范，提升代码质量。在 Vue CLI 项目中集成 ESLint，可以自动化检查并修复代码中的潜在问题。...

vue3.0学习笔记

SunGrowing的博客

10-30

611

小记组件实例和应用实例生命周期模板语法与2.X相同的功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入组件实例和应用实例应用实例 const app = Vue.createApp({ /* options */ }) 可链式 V

【Vue】脚手架的一些个介绍

Superman_H的博客

02-09

3465

# 脚手架 - 脚手架 Vue CLI：用于快速生成 Vue 项目 - 安装 Vue CLI：`npm i -g @vue/cli` - 查看 Vue CLI 版本：`vue -V` - 创建项目：① `vue create project-name`、 ② `cd XXX` 进入项目所在目录、 ③ `npm run serve` 运行项目 # 项目创建过程 1. `vue create vue-demo` 创建 Vue 项目 vue-demo 2. Please

碎碎念：初始化vue项目

yxiulian的博客

08-25

729

碎碎念：初始化vue项目

@vue/cli4--使用命令创建项目--方法/实例

IT利刃出鞘的博客

06-24

827

本文用实例来介绍vue-cli4如何使用命令来创建项目

前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）

前端人的博客

10-09

211

上一篇文章《前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）》介绍了什么是脚手架，以及Vue-cli 2.x如何创建项目，创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目？一、Vue-cli 2 与 Vue-cli 3的区别 vue-cli 3 是基于 webpack 4 打造的，vue-cli 2 还是 webpack 3。 vue-cli 3 的设计原则是 “0配置”，移除 build 和 config 等配置目录。 vue-cli 3 提供了 vue ui 命令，提

vue3 @/cli脚手架搭建项目

影子

08-22

368

创建一个工作目录：按住shift键，右键此工作目录打开powershell窗口 (s) 输入：start cmd就进入到cmd下面输入命令：vue create 项目名称然后按回车！进入预设，按方向键向下选择，最后按回车 Vue CLI v4.5.13 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) //这个是vue2.x Defaul...

vue eslint 配置_electron-vue跨平台桌面应用开发实战教程（一）——Hello World

weixin_39524703的博客

11-22

342

本文将带领大家使用vue-cli + electron-builder构建一个Hello WorldElectron是一个基于Chromium和 Node.js，可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。在开始搭建项目之前，需要安装以下工具node.js1 创建项目1.1 安装vue-cli先查看是否已经安装了vue-c...

Vue开发项目入门——Vue脚手架