vue-cli创建vue项目

原创 已于 2023-07-22 19:00:26 修改 · 199 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
1 篇文章 0 人学习
订阅专栏 查看详情
于 2023-04-12 21:39:22 首次发布
文章详细介绍了如何安装Node.js，检查npm版本，然后安装Vue.js和vue-cli。接着，创建Vue项目，选择配置特性，如Babel、Router和Vuex。讨论了针对Vue2.x版本选择合适的vue-router和vuex版本，以及使用nvm管理Node版本的重要性。

安装node

下载地址

查看是否已安装
npm -v

安装vue和vue-cli

npm i vue -g
npm i @vue/cli -g
查看是否已安装
vue -V

创建项目

  1. 在要创建的地方打开终端

    在这里插入图片描述

  2. 输入命令： vue create+ 项目名称，回车

    在这里插入图片描述

  3. 选择自主安装

    在这里插入图片描述

  4. 选择特性

    默认如下，按空格（space）进行取消和选择!!!
    在这里插入图片描述
    选择结果如下，回车（enter）
    在这里插入图片描述
    解释几个常见的特性

    - Babel #转译工具
- Router #路由工具
- Vuex #状态管理工具
- CSS Pre-processors #CSS 预处理器
- Linter / Formatter #代码格式校验，新手不建议选

  5. 选择vue版本,这里选择vue2x版本

    在这里插入图片描述

  6. 选择路由模式,这里输入n

    在这里插入图片描述

  7. 选择css预编译，一般选择less，容易入手

    在这里插入图片描述

  8. 选择配置文件存放方式,这里选择单独存放

    在这里插入图片描述

  9. 是否保存为预设,输入y之会保存当前的配置，下次创建项目时可快速创建，这里我们输入N，不保存

    在这里插入图片描述
    回车，开始创建
    在这里插入图片描述
    创建完毕
    在这里插入图片描述

  10. cd+创建的项目名称进入项目中，运行npm run sever运行项目

    运行成功
    在这里插入图片描述
    复制地址，在浏览器中输入，运行成功
    在这里插入图片描述
    项目结构
    在这里插入图片描述

补充

  1. vue-router vuex 版本

    在vue2项目中，如果需手动安装vue-router vuex,应注意：
    vue-router最新版本4适用于vue3，所以vue2项目中应安装版本3

    npm i vue-router@3

    vuex最新版本4适用于vue3，所以vue2项目中应安装版本3

    npm i vue@3

  2. nvm,管理node版本的工具

    下载地址
    在这里插入图片描述

标签
#vue.js #前端
Vuejs实例-使用vue-cli创建项目
long0801的博客
09-08 1127
1，首先从官方网站下载安装Node.js，建议使用6.x版本，同时也会一并安装npm工具，npm>3.10以上。   2，npm安装很慢（国外服务器），所以一般推荐使用npm淘宝镜像cnpm，先安装下cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装好cnpm后，以后使用npm的地方就可以使
vue-cli创建vue项目详细步骤
热门推荐
Hannah_Hannah_的博客
04-15 2万+
一、安装node环境 二、下载vue和vue-cli脚手架 命令：npm i-g vue ; npm i -g @vue/cli 三、在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端） 四、创建vue项目，输入命令（ vue create 项目名称） 五、进入详细选择 (上下 方向键选择,空格键确定,enter进入下一步) 1、默认vue2版本和默认vue3版本都是有Eslint和Babel的，Eslint是代码规范的，Babel是将ES6转化为ES.
Vue-Cli 创建 TypeScript 项目
m0_54158068的博客
02-25 2163
Vue-Cli 创建 TypeScript 项目
vue-cli3创建Vue项目
程序员柒的博客
02-09 3275
本文讲解了如何使用vue-cli3创建属于自己的Vue项目，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。下面案例可供参考。
03.Vue CLI项目创建详细指南
yk_dflkg的博客
07-02 3288
Vue CLI（Command Line Interface）是Vue.js官方提供的标准化命令行工具，用于快速搭建Vue.js项目。它提供了一整套完整的开发环境配置，包括项目结构、构建工具、开发服务器、测试框架等，让开发者可以专注于业务逻辑的开发。
【Vue知识点总结】全局组件注册
这是个栗子的博客
08-03 56
我是一个局部组件</div>// Parent.vue 父组件<template><div>-- 必须在 components 中声明后才能使用 -->// 关键步骤：显式注册ChildComp},
Vue Axios封装与SpringBoot Payload封装全景关联分析（前后端数据交互底层闭环）
snow的博客
08-06 154
本文系统剖析了前后端联调中Axios与SpringBoot的交互机制，指出参数接收失败、数据解析异常等问题的根源在于两者封装格式不匹配。通过对比表详细解构了前端请求封装与后端Payload解析的核心差异，揭示了数据流转全链路中的关键联动点（JSON/Form交互模式），并给出企业级标准化封装方案。文章强调：Content-Type、序列化格式、字段命名等核心要素必须严格对齐，前端封装必须适配后端解析规则，才能构建稳定可靠的前后端交互体系。最终提出"统一JSON载荷+@RequestBody接收&q
Vue Router 实战教程
m0_56086190的博客
08-04 184
这篇文章摘要如下： Vue Router 实战教程：从基础到生产环境应用 核心概念 Vue Router 连接 URL、权限、布局和业务页面 核心组成：path、component、name、meta等路由配置项 组件中通过useRouter()控制导航，useRoute()获取当前路由信息 实践要点 query传递参数：通过router.push()和route.query实现 路由守卫处理权限和页面逻辑 嵌套路由与Layout组件配合实现页面结构 keep-alive优化页面性能 生产环境注意事项 数字
一文学会 Vue Router：基本使用、传参、嵌套、守卫全覆盖
suger__salt的博客
08-05 441
声明式导航就是通过点击链接实现页面跳转。在普通 HTML 中我们用<a>标签，在 Vue 中则使用组件。在一个路由页面内部，还可以再进行子级路由切换，这就是路由嵌套。比如"发现音乐"页面下再分为"推荐 / 排行榜 / 歌单"三个子页面。返回值行为trueundefined/ 不写放行，导航正常进行false阻止，取消本次导航，URL 保持不变'/path'或重定向，跳转到指定路由基本使用（4+2）
Vue2 路由与 Vue3 路由全系列知识点实战案例详解
菜鸟的博客
08-01 299
在父路由中通过children数组定义子路由，子路由的path不需要以Vue2 与 Vue3 的区别：嵌套路由的children定义方式在 Vue2（Vue Router 3）和 Vue3（Vue Router 4）中完全一致，语法没有任何变化。唯一的区别在于外层路由的创建方式：Vue2 使用，Vue3 使用，但children数组的写法完全相同。Vue2 代码path: '/',},},routes})// 全局前置守卫。
Vue Router 4 从入门到实战：路由、导航传参、嵌套与守卫完整指南
最新发布
meilindehuzi_a的博客
08-06 263
本文围绕 Vue 3 与 Vue Router 4 构建了一条由基础到实战的学习路径：先解释前端路由、SPA 与组件目录的设计逻辑，再通过“4+2”流程完成路由安装、创建、注册、规则配置和出口渲染；随后深入讲解 RouterLink 激活样式、查询参数、动态参数、重定向、404、Hash 与 History 模式、编程式导航、嵌套路由及全局前置守卫。最后以音乐站项目整合全部能力，并通过执行链和测试表帮助读者定位空白页、传参失效、刷新 404 与权限重定向等常见问题。
Vue3父子组件传值
hopefullman的博客
08-05 175
vue3父子组件传值需要利用defineProps和defineExpose。父组件传递给子组件使用defineProps，本质是通过自定义props传递数据，但是子组件在接受数据时候需要在子组件中结合TS先定义一下传递数据的类型。子组件传递给父组件数据用到defineExpose，本质就是对外暴露数据。在用ref或reactive定一个传递的数据，在父组件中通过ref来获取子组件实例，在通过.value来获取具体数据。
【计算机毕业设计】基于Vue + Spring Boot的社区养老服务管理平台设计与实现
2601_96387018的博客
08-04 252
本研究设计开发了基于Vue+SpringBoot的社区养老服务管理平台，以解决老龄化社会下传统养老服务模式管理分散、供需匹配低效等问题。平台采用三端协同架构：管理员端实现全流程管理，服务人员端处理服务对接，用户端提供便捷服务获取与健康管理。系统包含9个核心数据库表，支持老人信息数字化管理、服务在线预约、健康档案维护等功能。通过Java开发、MySQL数据库支撑，平台有效整合养老资源，规范服务流程，提升了养老服务效率和质量，为社区养老数字化转型提供技术支撑。
我把一套 Flowable + Spring Boot + Vue 的 BPM 流程引擎整理开源了：从流程设计器到待办闭环
tiandingtong的博客
08-02 298
最近把一个 BPM 流程引擎项目单独整理成了开源版，项目名叫 Open BPM Flow Engine。它的定位比较明确：给 Java 后端、全栈工程师、技术负责人一个可以本地跑起来、能看懂核心链路、能二次开发接业务系统的 Flowable
Spring Boot+Vue短视频推荐平台实战：协同过滤与内容运营一体化----附源码32744
Zhang523853的博客
08-05 198
本文整理一套基于Spring Boot、Vue.js与MySQL开发的短视频推荐系统。平台面向普通用户和管理员两类角色，前台提供短视频浏览、热门内容展示、论坛交流、收藏评论、分享反馈等功能，后台负责用户、视频分类、热门视频、公告资讯、留言及敏感词等内容管理。系统以用户观看和互动行为为依据，通过协同过滤思路生成个性化推荐结果，并采用分层架构实现前后端解耦。项目覆盖推荐逻辑、业务模块、数据表设计、页面实现和功能测试，可作为Java Web课程设计及推荐系统入门项目参考。
Vue3中ref和reactive用法与双向数据绑定
hopefullman的博客
08-05 199
此时控制台中会打印name，可以看到name是一个refImpl对象，并且具有value属性。因此修改通过ref定义的name和age时候不能写成name=‘李四’而是需要写成name.value=‘李四’。同理age要写为age.value+=1。此时控制台中会打印person，可以看到person是一个proxy对象。因此修改通过reactive定义的person只需要写成person.name=‘李四’。同理age要写为person.age+=1。具体使用方式可以参考上面的的代码片段使用即可。
Jenkins自动部署实战：Vue与Spring Boot构建、Nginx发布及Webhook触发
池央的博客
07-31 1万+
项目开发完成后，如果每次更新都要人工登录服务器、拉取代码、安装依赖、重新打包，再手动替换旧文件和重启服务，操作不仅重复，也容易遗漏某个步骤。对于前后端分离项目，这个过程还会更加复杂。前端需要完成依赖安装、打包和静态文件替换，后端则要执行Maven构建、更新JAR包并重新启动服务。项目更新频繁后，人工部署会占用越来越多时间。Jenkins可以把代码拉取、项目构建和部署命令整理成固定任务。
Vue3 中 computed 计算属性与 watch、watchEffect 监听
菜鸟的博客
08-01 224
根据已有的响应式数据，派生出一个新的值。它就像一个“自动计算的公式”，只要依赖的数据发生变化，计算属性就会自动重新计算，并且结果会被缓存。通俗理解：computed 是“声明式”的，你告诉 Vue“我想要什么”，Vue 自动帮你算好。它适合用在模板中展示经过加工的数据。监听某个数据的变化，当它变化时执行一段副作用逻辑。它更像一个“哨兵”，一旦发现目标变化，就触发你预先定义好的回调函数。和vue2的作用一致，但写法有区别。watch 可以监听以下几种情况：监视 【ref】定义的【基本类型】数据，
Vue3与Vue2插槽：默认插槽、具名插槽、作用域插槽对比与实战
菜鸟的博客
08-02 391
插槽（Slot）是 Vue 组件化开发中用于内容分发的重要机制。它允许父组件向子组件传递模板片段，实现更灵活的组件复用和组合。无论是 Vue 2 还是 Vue 3，插槽都是构建可复用 UI 组件的核心概念。插槽类型主要特点数据流向适用场景默认插槽只有一个插槽，不需要命名父 → 子（单向）简单的内容替换具名插槽多个插槽，通过名称区分父 → 子（单向）多区域布局作用域插槽子组件向插槽内容传递数据子 → 父（双向）数据驱动渲染。
华为云 CodeArts Pipeline前端 Vue 项目自动打包发布配置指南
代码之美
08-03 362
从零开始配置 Vue 项目 CI/CD 流水线，实现代码提交自动构建部署到 ECS📋 适用产品：CodeArts Pipeline + Deploy🖥️ 目标环境：华为云 ECS（内网 192.168.1.77）📅 更新日期：2026-08-03。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值