新建第一个Vue项目（使用脚手架vue-cli）

原创 已于 2023-07-13 16:18:14 修改 · 112 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2023-07-13 15:28:07 首次发布
本文介绍了如何使用vue-cli安装和创建Vue项目，包括选择Vue2或Vue3版本，自定义项目设置，如选择scss作为css语言模式，并详细说明了如何运行项目，通过`npmrunserve`启动开发服务器。

一、准备

安装vue-cli:

npm i -g @vue/cli

二、创建项目

1、基于命令行的方式创建vue项目

vue create "项目名称"
  • 创建项目时提示下图，根据需求选择vue2或vue3项目 或者手动设置创建自定义项目（该实例选择第三个）

  • 自定义设置时各选项代表的含义

  • 根据需求选择vue2或vue3 

  • 是否备份之前的设置 

  •  css语言模式（我选择的是scss）

  •  项目创建中

三、运行项目

  • 打开项目后输入 
npm run serve
  • 项目运行成功 

 

使用Vue-cli脚手架快速创建项目教程
qq_62000508的博客
05-12 805
本文介绍了如何使用Vue-cli脚手架快速创建Vue项目，并详细说明了创建过程中的关键步骤和配置选项。首先，确保已安装Node.js并配置好环境。接着，通过命令行全局安装Vue-cli，并验证安装是否成功。然后，在指定目录下使用vue create命令创建项目，选择手动配置方式，并根据项目需求选择集成的功能，如Babel、TypeScript、Vue Router、Vuex等。
使用Vue-cli脚手架创建uni-app项目（Vue2版本）
m0_67584973的博客
06-28 1953
uni-app官方说除了HBuilderX可视化界面，也可以使用cli脚手架，可以通过vue-cli创建uni-app项目
vue脚手架(vue-cli)详细安装过程
学习，是熵减的最有效途径。
08-16 4万+
CLI，俗称脚手架。全称是。vue-cli 是vue官方发布的开发vue项目的脚手架。vue脚手架用于自动生成vue和webpack的项目模板，是一个快速构建vue项目的工具，可以自动安装vue所需要的插件，避免手动安装各种插件、逐个引入的麻烦。以及自动配置webpack，之前我们都是手动配置webpack。首先是特别的繁琐，而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli，他会自动帮助我们配置webpack。...
【前端 19】使用Vue-CLI脚手架构建Vue2项目
delepaste的博客
07-29 1277
Vue CLI（Vue Command Line Interface）是一个基于Vue.js进行快速开发的完整系统，提供了零配置的项目启动、开发调试、打包部署等功能。本文将详细介绍如何安装Vue CLI，并使用它构建一个Vue 2项目，同时解析Vue CLI构建出的项目目录结构。目前最直接的方式是使用Vue CLI 2.x版本或通过在Vue CLI 3/4中指定Vue 2的模板。但考虑到Vue CLI 3/4的广泛使用和灵活性，这里我们采用Vue CLI 3/4，并在创建项目时手动选择Vue 2版本。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
景天科技苑
03-22 5278
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
使用 vue-cli 脚手架创建一个vue2的项目吧
qq_45437773的博客
04-21 523
使用 vue-cli 脚手架创建一个vue2的项目，配置一些校验问题
前端-使用vue-cli脚手架创建项目
weixin_46969393的博客
12-09 545
使用vue-cli脚手架创建项目
Vue-Cli(脚手架)安装及如何创建Vue-Cli项目-保姆级别教程,手把手教会你
热门推荐
m0_72568513的博客
06-09 5万+
快速创建 Vue.js 项目的向导式用户界面：我们只需要按照界面上的步骤一步步操作，就可以快速创建一个 Vue.js 项目。支持自定义配置：Vue CLI 提供了多种配置选项，开发者可以根据自己的需求进行选择和配置。支持插件扩展：Vue CLI 支持插件化扩展，开发者可以根据需要安装插件，例如路由、状态管理等。支持开箱即用的工具集成：Vue CLI 集成了很多实用的工具，例如 Babel、Webpack、ESLint 等。
使用脚手架（Vue-Cli）快速创建一个vue项目的步骤
qq_59808309的博客
01-22 6469
一、安装vue https://cn.vuejs.org/v2/guide/installation.html 二、先确定是否安装了node.js、npm和cnpm node.js的下载地址：Node.js NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编
Vue-Cli脚手架项目的搭建【新手快速入手】
2301_79258776的博客
05-06 2691
Vue CLI是官方提供的一套全面的开发工具链，可以帮助开发者快速搭建Vue项目。以下是使用Vue CLI搭建Vue脚手架的详细步骤。
精选资源
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。 如果您想成为赞助商，请考虑： :1st_place_medal: 金牌赞助商 :2nd_place_medal: 银牌赞助商 :3rd_...
使用vue脚手架（vue-cli）搭建一个项目详解
10-17
本篇文章将详细讲解如何使用Vue CLI搭建一个项目。 1. **安装Node.js** 在开始之前，确保已安装最新版本的Node.js。因为Vue CLI是基于Node.js运行的，所以它是搭建项目的前提条件。你可以通过官方网站下载并按照...
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
为了解决这个问题，Vue 官方提供了 `vue-cli` 这个脚手架工具，它可以帮助开发者快速地生成一个包含所有必需配置的项目模板。 1. **安装Node.js环境**： 在搭建Vue项目之前，首先确保你的计算机上安装了Node.js。...
Vue 2 项目中 template 使用可选链 ?. 导致的诡异编译报错及 webpack loader 配置坑
GhostPaints的博客
01-05 897
最近在维护一个基于 Vue 2 的老项目（RuoYi-Vue 框架衍生）时，遇到一个特别诡异的编译问题：同一个项目，使用 pnpm run dev（连接测试环境）一切正常，但切换到 pnpm run dev:local（连接本地后端）时，启动就直接报错，错误信息指向 template 中的可选链运算符?这让我百思不得其其解——Vue 2.7 明明官方支持 template 中的?.，为什么本地环境就炸了？。
Vue 3 组件通信全方案详解：Props/Emit、provide/inject、事件总线替代与组合式函数封装
小二丶的博客
01-05 1278
本文系统梳理Vue3中7种组件通信方式，重点剖析props/emits、provide/inject、v-model等核心方案，并通过实战案例演示应用场景。文章包含完整TypeScript代码实现、性能对比数据及5个常见反模式避坑指南。主要内容包括：父子组件通信（props/emits）、跨层级通信（provide/inject）、双向绑定（v-model）、逻辑复用（Composables）以及全局状态管理（Pinia）。
某知名it培训班前端三阶段vue相关面试题
Lau的博客
01-06 692
data() {},sum() { // 只读计算属性},fullName: { // 可读写计算属性},
2026 实现优雅的现代 Vue3 通用模板
猪猪侠的博客
01-08 187
添加 GitHub Actions 自动化部署配置示例。设置 VS Code 工作区推荐配置。配置 Vue Router 示例。使用 Vite 官方模板创建项目。设置 ESLint 配置文件。配置 Vite 的自动导入功能。配置 Vitest 测试文件。创建 Pinia 存储示例。进入项目目录并安装基础依赖。配置生产环境构建命令。
Vue3研学-watch监视
最新发布
zhlyxx的博客
01-08 768
Vue 3 的 watch API 提供了多种数据监听方式：1) 监听 ref 基本类型数据时直接监视变量；2) 监听 ref 对象类型需开启 deep 选项；3) reactive 对象默认深度监听；4) 监听对象特定属性需使用 getter 函数。watch 支持配置 immediate 立即执行和深度监听，通过返回的 stop 函数可手动停止监听。与 watchEffect 相比，watch 能更精确控制依赖范围和监听行为，适合处理异步操作和复杂状态变更场景。
轻松打造Vue项目：easy-vue-cli脚手架深度体验
easy-vue-cli作为Vue-cli的一个分支或衍生工具，提供了一种更加简便和高级的使用体验，尤其适合初学者快速上手和进行项目构建。 ### 开箱即用的特性 easy-vue-cli项目致力于提供开箱即用的体验，这意味着用户在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值