5.创建 Vue-cli 的环境 和第一个项目

最新推荐文章于 2024-09-13 14:34:15 发布
最新推荐文章于 2024-09-13 14:34:15 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 前端 Vue  文章标签： vue.js javascript npm vue-cli 的安装和使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52252193/article/details/121972098
版权
本文介绍了如何使用Vue-cli快速创建Vue项目的步骤。首先，详细讲述了Vue-cli作为官方提供的脚手架，能带来统一目录结构、本地调试、热部署、单元测试和集成打包上线等便利。接着，讲解了环境配置，包括安装Node.js和设置淘宝镜像加速器cnpm。最后，指导如何创建基于webpack模板的Vue应用程序，包括项目命名、选项选择等，并指出遇到问题时的解决办法。
摘要由CSDN通过智能技术生成

Vue-cli简介
vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板（相当于maven提供模板）

预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速   功能 1.统一的目录结构 2.本地调试 3.热部署
  4.单元测试   5.集成打包上线

 npm  (Node Package Manager 包管理器，代码依赖的库)

5.1 环境配置

  • 1.Node.js 这是运行vue的平台环境
  • 下载地址： http://nodejs.cn/download/ 

  • 安装的时候一直下一步直到结束（可以更改安装目录）     确认是否安装成功：

  • 在cmd中运行node -v命令，查看是否能够输出版本号
  • 在cmd中运行npm -v命令，查看是否能够输出版本号

 2.安装node.js淘宝镜像加速器（cnpm）


npm install cnpm
最低0.47元/天 解锁文章
是小晴晴呀
关注
专栏目录
vue-cli5.0脚手架的安装搭建和运行
qq_60334912的博客
08-19 1933
vue脚手架安装
Vue CLI配置指南（5）环境变量和模式
悦涵仙子的技术笔记本
08-26 870
你可以替换你的项目根目录中的下列文件来指定环境变量： .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 一个环境文件只包含环境变量的“键=值”对： FOO=bar VUE_APP_SECRET=secret 被载入的变量将会对 vue-cli-s
最新【vue】使用vue-cli5.0快速搭建一个项目
热门推荐
专注于Java领域开发 关注我 带你玩转Java
02-24 1万+
快速搭建vue/cli脚手架教程
Vue-CLI 4 搭建Vue项目
God-Excious的博客
09-21 3033
文章目录一、Node.js安装二、Vue-Cli安装三、Vue项目创建1、项目创建2、项目依赖导入2.1 vue-router（路由）3、项目配置3.1 router.js（路由配置）4、测试效果 一、Node.js安装 到Node.js官网（https://nodejs.org/zh-cn/）上，下载并安装Node.js，选择【长期维护版】即可 使用安装包安装，选择安装路径可以根据自己的需要改一下（比如我安装在了D:\Environment\nodejs\目录下）。 这个Necessary Tools
vue-cli 5 搭建 vue 项目
qq_36835255的博客
04-22 5518
vue-cli 5 搭建 vue 项目
详解项目升级到vue-cli3的正确姿势
12-02
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。Vue CLI 3 是其第三个主要版本，带来了许多改进和优化。在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。...
vue-cli4.x创建企业级项目的方法步骤
10-15
本篇文章将详细介绍如何使用 Vue CLI 4.x 创建一个企业级项目，并涵盖关键步骤和配置。 首先，确保你已经安装了 Node.js，因为 Vue CLI 是基于 Node.js 的。然后，你需要全局安装 Vue CLI： ```bash $ npm install...
VUE：vue-cli4创建普通vue3项目及环境搭建
干饭搬砖两不误。
08-30 1426
关于vue-cli4.0创建vue3项目及环境搭建
Vue2.X Vue-CLI简介
cc常 的博客
03-18 261
Vue2.x Vue-CLI简介 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 什么是Vue-CLI(Command Line Interface)? Vue-CLI是vue官方提供的脚手架工具, 默认已经帮我们搭建好了一套利用webpack管理vue的项目结构 如何安装Vue-cli和使用Vue-CLI? 安装脚手架工具: npm
如何快速安装vue-cli脚手架
静水流深，沧笙踏歌
05-13 7315
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。vue-cli官方提供了一个脚手架，用于快速生成一个vue的项目模板。它预先定义好目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，他能使我们的开发更加快速。vue-cli这个构建工具大大降低了webpack的使用难度，支持热部署，有webpack-dev-server的支持，相当于启动了一个请
二、开始Vue项目
qq_26440111的博客
08-08 156
1. 下载安装node.js 下载地址 #查看版本 node -v npm -v 2. 全局安装cnpm npm install cnpm -g 3. cnpm安装vue-cli cnpm instal1 vue-cli-g #测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常选择webpack vue list 4. 生成Vue项目 #控制台在任意文件夹下使用如下命令创建一个名为myvue的项目，一路选no vue init webpack myvue 5. 运行Vue项目 #进入项目
使用vue-cli进行vue项目的搭建
m0_53623945的博客
05-08 2037
1.安装nodejs 下载安装nodejs并按提示安装，安装完成后进入cmd运行node -v，显示版本号即为安装成功，如果没有显示就去配置环境变量。 node -v 2.安装淘宝镜像加速器（cnpm）和vue-cli脚手架 vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；   预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速； 项目的功能 ...
vue-cli 5 搭建 vue3 项目
专搞技术的小兔子
08-04 1035
vue-cli 5 搭建 vue3 项目
vue-cli脚手架搭建时基础设置说明
m0_46694056的博客
10-05 412
基础选项 Check the features needed for your project: (✳) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 (✳) Rout
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 393
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 711
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 410
element-plus组件问题汇总
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 534
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
Vue-cli：环境搭建及项目创建指南（Node.js/NPM安装配置）
Vue-cli是一个由Node.js环境支持的命令行界面工具，用于快速创建Vue.js项目。要使用Vue-cli，首先需要安装Node.js环境。可以通过官方网站https://nodejs.org/zh-cn/下载安装包并进行安装。安装完成后，可以在命令行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小晴晴呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值