vue 通过脚手架搭建项目

最新推荐文章于 2024-07-11 13:31:46 发布
最新推荐文章于 2024-07-11 13:31:46 发布
阅读量192 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40922656/article/details/111037479
版权
本文详细介绍了在node14环境下使用@vue/cli4.5.9手动搭建Vue2项目的过程，包括选择手动安装、配置路由模式、安装element-ui及全局引入。项目结构解析，强调了关键文件的作用，如.src目录下的components、router、views和main.js。
摘要由CSDN通过智能技术生成

通过脚手架搭建一个vue项目的过程，本文的环境是node14采用脚手架@vue/cli4.5.9

开始搭建
1、切换到相应的目录下，在改目录下创建项目
vue create demo //此处的demo是项目名称
在这里插入图片描述
2、选择如何创建vue
第一个选项是默认安装vue2
第二个选项是默认安装vue3
第三个选项是手动创建
本文选择3手动安装（手动安装的时候亦可以选择版本）
在这里插入图片描述
3、选择手动安装可以自己按需安装依赖，默认的安装没有安装路由和vueX.
这里需要安装什么就选择什么就OK
在这里插入图片描述
4、选择安装版本，本文选择2.0
在这里插入图片描述
5、选择路由模式
history还是hash 本文采用hash模式
在这里插入图片描述
6、是否保存，

最低0.47元/天 解锁文章
孟孟_mengmeng
关注
专栏目录
《vue项目使用》： vue脚手架搭建
沈英逊的博客
01-09 504
一、从node官网中下载并安装node 1、下载完成后，在命令行工具中输入 node -v 检查是否安装成功，如下图所示，返回了版本号，则说明安装成功。 2、输入 npm -v 可查看npm版本（注：npm是集成在node里面的，所以不用再下载）。 二、安装vue脚手架 注：安装vue脚手架可通过npm安装，也可通过cnpm安装，cnpm是淘宝的npm镜像，使用cnpm安装会更快更...
初学者搭建Vue脚手架工程
Mcally的博客
10-15 394
初学者搭建Vue脚手架工程 1.在前端的知识海洋里，各种前端框架自动化测试满天飞，正如在当下想不被淘汰，那只有不断的去学习心得知识，所以就有了今天的一次学习vue搭建脚手架的记录。 2.第一步:搭建vue工程项目，传送门地址送给你:https://cli.vuejs.org/zh/ 此是官方的地址，各种文档甚是详细望大伙们观摩学习，早日脱凡入圣 3. 第二步:要搭建vue脚手架工程项目,首先的需要安装node.js二话不说送上传送门根据自己电脑系统和配置进行下载：https://nodejs.org/en
Vite 创建 Vue3 + TS 项目
最新发布
洛*璃的博客
07-11 650
在本文中，博主将详细讲述如何使用 Vite 搭建一个Vue3 + TS 的前端项目
VUE实战之通过脚手架搭建项目
qq_37820460的博客
01-11 290
未经博主同意，不得以任何形式转载、复制、编辑或发布本文 一、使用VUE的原因 1.vue的优点 体积小：压缩后33k； 更高的运行效率； 双向数据绑定； 生态丰富、学习成本低。 二、安装 1.开发工具 推荐VSCode，点击前往官网下载 2.环境准备 2.1 nodeJs：点击前往官网下载 下载后解压并安装，安装步骤请另行查阅资料，本文不再赘述。 安装好之后在cmd窗口中执行node -v检验...
Vue脚手架搭建项目
酸菜丶小子
07-27 4893
Vue脚手架搭建项目以及node版本切换
Vue脚手架构建项目（新）
weixin_43886259的博客
07-15 587
首先，根据官方提示，卸载旧版本，若无安装，请忽略。 Vue脚手架项目构建步骤： 1.安装node.js(推荐 8.11.0+)，这里不赘述咯。 2.安装vue-cli：cmd下运行npm install -g @vue/cli。此命令将自动从npm服务器下载资源。下载安装比较慢，得十几分钟吧。 3.查看vue-cli是否安装成功，cmd下运行vue --version。显示如下，则表示安装成功。 安装vue-cli一般不会失败，除非网络原因。但是cmd可能会提示： 'vue' 不是内部或
Vue3 脚手架搭建项目详细过程
热门推荐
zyf971020的博客
10-12 1万+
Vue3 脚手架搭建项目详细过程及代码规范配置
vue-cli3.0 脚手架搭建项目的过程详解
10-17
Vue CLI 3.0 是 Vue.js 官方提供的一个强大脚手架工具，它简化了 Vue.js 项目的初始化和构建过程。本篇文章将详细介绍如何使用 Vue CLI 3.0 来搭建一个新的 Vue 项目。 首先，你需要确保已经安装了 Node.js 和 npm...
vue脚手架搭建项目及vue学习
06-06
在"vue脚手架搭建项目及vue学习"的主题中，我们将深入探讨如何使用Vue CLI（命令行接口）来初始化一个项目，以及Vue的核心概念和关键特性。 1. **Vue CLI的使用**： Vue CLI是一个官方提供的强大脚手架工具，用于...
用vuecli3搭建的vue项目脚手架
08-09
用vue-cli3搭建的vue项目脚手架
【Vue】基于脚手架(vue-cli)项目搭建
我要手撕源码的博客
04-17 99
Vue 新建VUE项目 以下用npm按照失败的都可以将npm换成cnpm 创建项目 vue init webpack <项目名> #新建项目 选项全部选no（手动安装） ? Project name blog-vue ? Project description A Vue.js project ? Author Architecture_HUI 815438732@qq.com ? Vue build standalone ? Install vue-router? No ? Use E
VUE-脚手架搭建
xhmico的博客
12-15 2893
vue 有两个大版本，分别是 vue-2 和 vue-3，目前新项目的话用 vue-3 的会比较多以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。
vue项目实战（一）之vue-cli脚手架搭建项目
abcwanglinyong的博客
10-17 4733
首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。 如果感觉npm下载速度慢，可以使用淘宝镜像cnpm,链接地址： http://npm.taobao.org/ 安装cnpm 方式一： npm install -g cnpm --registry=https://registry.npm.taobao.org 方式二： alias cnpm="npm --...
使用vue脚手架搭建项目详细解说
Im_xiaopei的博客
10-05 2880
1.脚手架安装 在cmd中全局安装vue脚手架，输入npm i@vue/cli -g 安装脚手架完毕 2.通过vue脚手架创建项目，创建项目有两种的方式，这里介绍的是使用图形化界面来创建，命令是vue ui。 在项目文件中打开cmd命令框，输入vue ui命令，点击回车，等待执行完毕，自动打开视图界面，如下： 填写项目名字，这里不支持中文，注意一下，然后下一步 选择手动配置，进行下一步， 创建项目时，以下四个功能一般需要选择 Babel Router Linter...
用vue脚手架快速搭建项目步骤，详细
qq_42707594的博客
01-25 930
什么是vue脚手架： vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。 创建项目步骤如下： 1、安装Vue CLI脚手架 指令：cnpm i -g @vue/cli 一共35个文件 2、创建Vue项目 指令：vue create 项目名 若手动选择功能，步骤如下： 选择功能。通过上下键控制位置，空格键来确定 是否选择 选择vue本版本 第一个yes是选择路由模式，n是选择哈希模式 这一
vue脚手架安装，项目创建
pla31656的博客
12-13 1016
vue概念： 什么是vue vue 是一个渐进式的javascript框架 开发vue： 1.传统的开发是通过html页面引入vue 2.现在是用webpack 工程开发 vue 文件： 1.template 必须提供的解构html 注意：必须要一个根元素 2.script 书写js代码 3.style 处理样式，默认支持css 通过lang="less/scss"可以使用less和css ...
vue脚手架与创建vue项目
qq_48843954的博客
05-28 844
vue脚手架的安装与创建vue项目需要先行安装配置node与npm，详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值