vue脚手架创建项目流程

最新推荐文章于 2024-08-25 18:02:18 发布
置顶 最新推荐文章于 2024-08-25 18:02:18 发布
阅读量461 收藏 2
点赞数 2
分类专栏： 项目流程 文章标签： vue.js html node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46183499/article/details/109613626
版权

vue脚手架创建项目流程

搭建前提
node环境搭建好 脚手架全局安装（npm install --global vue-cli）
第一步
任意命令行或编辑器中输入指令 vue create 项目名称
vue create project(项目名称可随意)
在这里插入图片描述
回车后选择配置
default 为默认配置
Manually select feature 为手动选择配置
default 为默认配置Manually select feature 为手动选择配置

第二步
此处选择手动配置后 按回车键
进行配置
建议选择以下几项
Babel为es6、es7提供服务 Router是路由配置 vuex方便管理数据 css pre-processors为支持scss和sass Linter为代码规范Babel为es6、es7提供服务 Router是路由配置 vuex方便管理数据 css pre-processors为支持scss和sass Linter为代码规范
选择完毕后按回车键
第三步
进入到路由模式选择（可自由选择）
路由模式选择 y
选择完毕后按回车键
第四步
进入到css选择（此处建议选择 dart-sass node-sass包下载可能会出问题（别担心，下面有补救方法））

选择完毕后按回车键
如不小心选到node-sass安装时可能会出错 (当然不出错更好)
补救方法：进入文件所在目录下 用 cnpm 再次安装即可
安装指令 cnpm install --save node-sass
第五步
进入到代码规范选择（此处选择标准配置）

选择完毕后按回车键
第六步
进入到额外的代码规范选择（建议两个都选上 第二个为提交后自动修复不规范代码）

选择完毕后按回车键

第七步
进入到配置存放选择（此处选择专用配置文件）

选择完毕后按回车键

第八步
进入到未来项目预置选择（此处可自由选择）

选择完毕后按回车键

第九步
上一步如选择yes 后 选择no 则不进入
进入到保存预置选择（预置保存名称可自由填写）

选择完毕后按回车键

第十步
进入安装依赖时所需要的包管理器（可自由选择）

选择完毕后按回车键
至此所有配置基本就结束了 如下图所示
在这里插入图片描述

第十一步
进入脚手架搭建（系统自动完成 等待即可）
等待即可
结束后 出现两个蓝色指令即搭建成功
出现两个蓝色指令即搭建成功
第十二步
输入指令 进入项目中（cd + 文件名称 进入即可）

第十三步
输入指令 启动项目（项目启动指令）

出现两个地址后就成功了
在这里插入图片描述

以上就是vue脚手架项目的搭建过程了 简单的项目架子就搭建好了

打小就霸
关注
专栏目录
脚手架vue-cli自定义创建Vue项目，完整详细步骤！
共同学习，共同成长
06-04 541
脚手架vue-cli自定义创建Vue项目，完整详细步骤！
【vue创建项目】vue脚手架创建项目的过程
weixin_52428783的博客
07-06 464
vue创建项目过程 通过安装node.js 我能就能完成vue的基本安装准备了，在安装完之后我们还需要通过vue的脚手架创建我们的项目，基本步骤是： 按住 win + R 输入 cmd 进入命令提示符界面检查node版本：...
vue脚手架创建项目基本流程
Json_book的博客
07-13 300
vue创建项目流程
vue-cli搭建项目过程
最新发布
2302_78078800的博客
08-25 2867
前端js框架 vue-cli的使用
vue 脚手架创建
qq_43826626的博客
04-22 1266
脚手架是什么呢，就是vue自动创建脚手架的项目模板，用于搭建项目的整体骨架，就比如后端开发时，咱们可以创建一个空项目，一步步创建为mvc项目，但是vs封装了mvc的框架，我们可以直接生成整体框架，其中包括基础包和一些重要文件，脚手架的创建也是同样的效果。
Vue创建脚手架项目
aa
04-06 858
vue脚手架创建项目要使用Vue脚手架创建一个新的项目，请按照以下步骤操作：确保你已经安装了Node.js和npm。安装Vue CLI（Vue的官方命令行工具）：这里我已经安装完了 从创建项目开始演示打开vscode终端（ctrl + ~）直接输入以下命令我这里创建到C盘上了，你可以切换到别的盘符此时屏幕会显示?选择你要创建vue2或者vue3项目，这里我选的是vue2（键盘上下按键就可以选择,完毕后按回车）此时屏幕会显示一些信息等待即可。
Vue脚手架搭建项目
酸菜丶小子
07-27 4967
Vue脚手架搭建项目以及node版本切换
2024最新：关于基于vue-cli脚手架创建vue项目（图文版）
m0_69097184的博客
09-21 615
它确保各种构建工具与合理的默认值一起顺利运行，因此您可以专注于编写应用程序，而不是花费数天时间争论配置。同时，它仍然提供了调整每个工具配置的灵活性，而无需弹出。TypeScript 是一个 JavaScript 的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。代码风格检查和格式化（如：ESLint）【建议选择】vue-router（Vue 路由）【建议选择】。vuex（Vue 的状态管理模式）。E2E（端到端）测试。概述（来源于官方文档）
Vue脚手架搭建以及创建Vue项目流程
m0_67402588的博客
07-28 233
安装Node.js(推荐一个网站http下载安装完成之后进行测试,记住安装位置node-v测试node是否安装成功以及检查node版本npm-v测试npm是否安装成功以及检查npm版本效果提示如果碰到下面情况可能原因可能是CUsersAdministrator(users)目录下的.npmrc里的配置问题,把里面的文件改成自己需要的路径，比如我想放到J盘prefix=Jcache=J配置npm下载插件的默认安装目录和缓存日志目录,...
通过vue脚手架创建项目
weixin_45844109的博客
09-09 445
使用vue-cli脚手架搭建vue开发环境 安装全局vue-cli脚手架，用于帮助搭建vue框架的模板项目。 打开cmd，执行以下指令。 cnpm install vue-cli -g 安装vue脚手架 关闭cmd重新打开，执行以下命令，验证vue安装是否成功 vue vue -V 验证vue安装成功 或者如下： 使用webpack打包工具，启动vue项目 创建一个工作空间用于保存项目，比如本文使用D:\workspace\vs_workspace 打开cmd，通过cd指令进入该目录 进入
Vue-Cli 脚手架 搭建 Vue项目
灵魂学者的博客
02-03 2255
本篇主讲如何通过vue提供的vue-cli脚手架来搭建vue项目，自此开始进行Vue基于项目中的介绍，Vue-cli 是官方提高用于搭建基于 Vue、Webpack、ES6 项目目的脚手架工具，通过脚手架创建项目势必会较为高效！
vue脚手架搭建
qq_42401946的博客
04-19 320
安装node.js Vue脚手架自带配置： 安装Vue脚手架，通过Vue脚手架创建项目 配置router路由，vuex，scss 第三方ui库： 配置Element-UI组件库 请求接口： 配置axios库 一、 安装node，vscode 二、 全局安装脚手架vue-cli 链接：https://cli.vuejs.org/zh/guide/creating-a-project.html 命令：npm install -g @vue/cli 三、 选择项目存放路径，创建一个项目 命令：vue crea.
vue创建脚手架项目
m0_62181310的博客
06-14 6458
@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目目录一、创建脚手架项目1.全局安装命令2.查看vue脚手架版本3.@vue/cli 创建脚手架项目-启动3.1 创建项目3.2 选择模板3.3 回车生成文件3.4 进入项目启动文件 二、vue脚手架文件说明1.目录和代码分析2.主要的3个文件和关系 三、vue/cli自定义配置1.自定义服务配置2.eslint暂时关闭设置 四、单vue文件开发五、清空脚手架欢迎界面 2.查看脚手架版本 如果出现版本号就安装成功
vue脚手架创建项目
ITronger的专栏
04-02 1237
1. 安装NodeJS 2.使用npm 安装vue和@vue/cli 安装成功后，在命令行使用vue -V查看是否安装成功。 3. 使用命令vue init webpack “工程名”，初始化一个vue工程。
VUE——使用VUE脚手架创建项目
热门推荐
weixin_68567820的博客
06-20 1万+
Vue脚手架安装及配置
Vue——创建Vue脚手架
m0_53912558的博客
02-19 603
a.安装全局@vue/cli(仅第一次执行，只需要在第一次创建脚手架的时候执行一次，电脑上会多出来一个全新的命令vue，以后创建脚手架时只需要呼唤vue，以后都不需要执行)1)Vue CLI使用的前提Node.js、webpack（npm install webpack -g全局安装）。脚手架作用是创建项目的初始文件，本质是方案的封装。b.执行下列命令，在执行过程中遇到一些警告属于正常现象，如果遇到卡顿的情况按一下回车就行。这是Vue为你准备的hello world组件，到此vue脚手架创建完毕。
Vue脚手架的创建
qq_57443373的博客
09-22 423
学习如何创建vue脚手架 文章目录一、创建准备二、创建步骤1.引入库2.读入数据三、允许 一、创建准备 二、创建步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_htt.
vue脚手架的创建
m0_65535661的博客
05-05 887
第一步：.电脑必须装有node，没有node,先去进行安装Node版本，node官网地址：下载 | Node.js 中文网http://nodejs.cn/download/ 第二步：电脑搜索cmd，打开小黑框， 全局下载脚手架，npm install -g @vue/cli(只需要在第一次使用的时候才进行下载，除非你重装系统或者重装node才需要再次进行下载） 第三步：下载完成之后查看版本 vue --version，一般使用的都是5.0版本的脚手架。 第四步：vue create 项目名（弹出来
【前端学习】Vue-cli脚手架创建项目步骤
Dog Sun的博客
03-21 361
我们在vue中开发项目，要使用vue组件，所以要编译vue组件，要使用es6语法，所以要编译es6，要使用css预编译语言，所以要编译…所以很多事情在开发前都要准备好，vue为了简化我们的准备过程，提供了vue-cli脚手架，可以让我们更快速的开发项目。 ·安装 npm install -g @vue/cli vue-cli是通过yarn管理的，因此我们可以通过yarn启动项目 yarn ser...
使用vue脚手架创建项目
05-25
使用Vue CLI来创建Vue项目是非常方便的。您只需要按照以下步骤进行操作： 1. 首先，确保您已经安装了Node.js和npm。您可以在终端中运行 `node -v` 和 `npm -v` 来检查是否安装成功。 2. 接下来，您需要安装Vue CLI。在终端中运行以下命令： ``` npm install -g @vue/cli ``` 这将全局安装Vue CLI。 3. 创建一个新的Vue项目。在终端中进入您想要存储项目的目录，并运行以下命令： ``` vue create my-project ``` 其中`my-project`是您项目的名称。您也可以在命令后面添加其他选项，例如： ``` vue create my-project --default ``` 这将使用默认选项创建Vue项目。 4. 安装项目所需的依赖项。进入项目目录并运行以下命令： ``` cd my-project npm install ``` 5. 运行项目。在项目目录中运行以下命令： ``` npm run serve ``` 这将在本地启动一个开发服务器，您可以在浏览器中查看您的应用程序。 现在，您已经成功地使用Vue CLI创建了一个新的Vue项目！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值