vue cli快速创建vue项目详细过程

最新推荐文章于 2024-09-18 17:27:15 发布
最新推荐文章于 2024-09-18 17:27:15 发布
阅读量969 收藏 1
点赞数 1
分类专栏： vue 文章标签： node.js vue.js vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47269259/article/details/120251873
版权
本文详细介绍了如何使用Vue CLI创建Vue项目，包括Vue CLI的介绍、安装步骤、项目创建过程，以及在创建过程中选择配置选项的建议。通过手动选择功能，可以选择Babel、Router、Vuex等，自定义项目配置。最后，通过`npm run serve`启动项目，并在浏览器中查看运行效果。
摘要由CSDN通过智能技术生成

一、vue cli的介绍和安装

  • Vue cli 是一个基于 Vue.js 进行快速开发的完整系统。 有三个组件：

    CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui
    等命令）

    CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server
    之上（提供 如：serve、build 和 inspect 命令）

    CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和
    e2e测试 等）

  • vue cli的安装可参考开发文档https://cli.vuejs.org/zh/guide/installation.html

  • node.js的安装可参考中文官方网站http://nodejs.cn/download/

    特别提醒：安装时，要注意自己安装的node.js的版本，一般不需要安装最新版本，官方文档要求是node.js版本≥8.9，我们安装的时候可以安装尽量大一点的，比如10.8.0左右都是可以的。

二

最低0.47元/天 解锁文章
前端陈皮喵
关注
专栏目录
vue-cli搭建项目
weixin_30815427的博客
08-20 1263
一、全局化安装cnpm 其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。 npm install cnpm -g --registry=https://registry.npm.taobao.org （1）全局安装 vue-cli ，在命令提示窗口执行： cnpm in...
Vue CLI创建Vue项目详细步骤
mingfeng4923的博客
08-17 5079
通过这些步骤，您已经成功地使用Vue CLI创建了一个新的Vue项目，根据项目需求进行了相应的配置。这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我门选择 n。这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了。这里的意思是问你选择哪一种CSS预处理语言，我的项目中一般使用的是SCSS我选择第一个。创建过程中，您将进入一个交互式的选择界面，根据您的需求进行配置。
Vue3项目创建
最新发布
weixin_45415107的博客
09-18 2724
在创建一个新的Vue 3项目时，您会遇到以下目录结构：根目录•package.json：项目的配置文件，包含项目依赖、脚本和其他设置。•package-lock.json：锁定依赖版本信息，确保每次安装的依赖版本一致。•README.md：项目的说明文档。•.gitignore：Git版本控制忽略文件。•public：静态资源目录，存放图片、字体等静态资源。•src：源代码目录，包含Vue组件、JavaScript文件、样式文件等。src目录。
Vue-cli快速创建vue项目
qq_52851550的博客
07-29 334
带你快速使用vue-cli脚手架搭建vue项目
vue-cli快速创建项目
Var的博客
01-02 593
vue-cli 3.0+脚手架快速创建项目及解析 使用vue开发大型项目时，需要考虑到目录结构、项目构建以及部署、热加载、代码单元化测试等事情，如果手动完成这些，效率非常低，一般情况下我们使用脚手架完成这样的工作。在vue.js的生态中，我们可以使用vue-cli来快速的构建项目。 1.首先本地全局安装 vue-cli 可以组合键：Windows + R打开黑窗口执行, windows 10 也可...
vue使用vue-cli快速创建工程
01-19
本文介绍了vue使用vue-cli快速创建工程，分享给大家，具体如下： vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue ...
基于Vue-cli快速搭建项目的完整步骤
12-09
前言 vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。...二、vue-cli快速搭建项目 安装完成后，同时在
图文讲解用vue-cli脚手架创建vue项目步骤
10-17
接下来，我们将详细探讨如何使用Vue CLI创建Vue项目。 **一、安装Vue CLI** 在开始之前，确保你的计算机上已经安装了Node.js，因为Vue CLI是基于Node.js的。你可以通过运行`node -v`检查是否已安装。如果没有，你...
Vue Cli3 创建项目的方法步骤
10-17
Vue CLI 3 是一个强大的工具，它为Vue.js开发者提供了快速搭建项目结构和自动化构建的能力。Vue CLI 3 的创建项目方法如下： 1. **安装Vue CLI 3**： 首先确保你的环境中已经安装了Node.js，然后通过npm全局安装...
搭建Vue脚手架（vue-cli）并创建一个项目
热门推荐
kivet 的博客
08-30 7万+
1、 安装nodejs环境 官网下载：https://nodejs.org/en/download/ 一直默认就行，路径可以改变但要记得到 安装完成后cmd，输入 node -v npm -v 如果能看到node和npm的版本号了，说明已经安装成功 注：node版本最好高一点，保险的话直接安装最新版本的，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了...
Vue cli 创建项目流程
duanhwonline的专栏
06-28 98
Vue cli 创建项目流程 1、下载Node.js http://nodejs.cn/download/ 根据自己系统下载 2、确认node安装成功： cmd 下 node -v cmd 下 npm -v 3、安装Node.js 全局安装 npm install cnpm -g 4、安装 vue-cli 脚手架 cnpm install vue-cli -g 5、新建工程 5.1 创建一个目录 5.2 vue init webp...
使用vue-cli创建vue项目
m0_61594728的博客
04-11 1111
使用vue-cli创建vue项目
vue cli 4创建项目过程详解
su98777的博客
11-04 1387
首先先确认自己电脑中nodejs的版本 官方要求 Vue CLI 4.0以上版本是要node.js v8.9以上版本（官方推荐v10以上版本） 使用node -v查看node.js版本号 node -v // 查看nodejs版本号 接下来下载Vue CLI至全局 npm install -g @vue/cli 查看当前版本 vue --version 接下来就可以去创建项目了 使用 vue create xxx 创建项目（xxx是项目名称）我这里创建的项目名就叫cli .
vue-cli3 构建一个vue项目（全过程）——1
m0_60266243的博客
08-12 333
文章目录vue-cli3 构建一个vue项目（全过程）——1一、环境安装1、Node安装2、vue-cli安装二、开始创建项目三、运行项目四、最终启动画面五、项目文件结构六、项目的编写 vue-cli3 构建一个vue项目（全过程）——1 一、环境安装 1、Node安装 ​ 也就是获取npm指令，可以直接点击这里前往下载安装，或者直接搜索node.js进行安装，网上版本很多，可以自行选择，目前node14版本比较不容易出现版本问题。 ​ 可以在命令行中用node -v来查看Node版本： $ node -v
vue-cli快速搭建vue项目
学无止境
02-08 4447
1.安装node(使用6+) 2.安装cnpm:安装包时，记得以管理员权限打开cmd 3.安装vue-cli ：npm install -g vue-cli 4.创建项目：vue init webpack XX  （请确保安装了webpack） 5.开发模式的文件在src目录下，进入文件后，打开package.json ,查看配置信息
vue-cli创建vue项目基本流程
白鸽
03-03 268
1、vue-cli基本介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，为创建vue项目提供巨大便捷。主要有三大组件 CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令） CLI 插
步骤讲解Vue-cli创建项目
qq_42553140的博客
08-18 2443
步骤讲解Vue-cli创建项目vue-cli安装创建一个vue的项目 vue-cli安装 全局安装vue-cli npm istall -g @vue-cli 创建一个vue的项目 比如我想在E盘地下的一个文件下创建一个vue的项目 输入cmd，回车，在终端输入 vue crate demo-first demo-first是我的项目名称,建议都起英文名 接下来会出现这个画面 下面三个选项，可以使用键盘的上下键选择 1. 第一个是自动配置vue2版本的项目 2. 第二个是自动配置vue3版本的
两种方式使用VueCli快速构建Vue项目
super1223的博客
07-09 876
vue cli脚手架使用 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 Vue Cli提供了以一种简单的方式来构建Vue项目，在Vue下，所有的配置，例如：loader，打包配置等，都不再需要手动安装管理。 自己使用webpack也可以搭建Vue项目，但是很多配置都需要手动安装和手写配置文件，相对来说，Vue-Cli大大简化了这个配置过程，使前端人员能够更加专注于功能页面的实现。 Vue cli的安装与常用指令 前置环境
使用vuecli快速创建项目
07-24
您可以按照以下步骤使用 Vue CLI 快速创建项目： 1. 首先，确保您的计算机已经安装了 Node.js。您可以在终端中运行 `node -v` 命令来检查是否已安装 Node.js，并查看安装的版本。 2. 安装 Vue CLI。打开终端并输入...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端陈皮喵

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

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

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

打赏作者

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

抵扣说明：

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

余额充值