Vue项目入门搭建教程

已于 2022-03-29 14:44:16 修改
阅读量365 收藏
点赞数
分类专栏： 前端 文章标签： vue 前端框架
于 2022-03-08 11:09:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45863142/article/details/123348467
版权

Vue项目搭建

安装nodejs

下载node.js
如今版本的node中包括npm包管理工具，所以下载node就包括npm了。
在这里插入图片描述

检验是否安装成功
在这里插入图片描述
安装webpack

安装vue-cli

npm install -g vue-cli

查看vue版本：vue -V
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JjLMbHWu-1646708487721)(C:\Users\糖加三勺\AppData\Roaming\Typora\typora-user-images\image-20220308103133115.png)]

创建vue项目

vue init webpack 项目名

vue项目创建完成：

启动vue项目：

1、进入项目所在目录 2、启动命令npm run dev

浏览器输入localhost:8080
在这里插入图片描述

丞枫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的介绍以及环境搭建
Lucky的博客
05-31 1万+
一、前言 Vue单页Web应用 Vue组件化开发 Node.js完成服务器功能 ElementUI有效实现界面 弹性盒子布局与SASS 二、Vue组件 1、全局注册组件 2、局部注册组件 三、Vue环境搭建 1.安装Vue的前置条件是安装node.js 2.安装vue脚手架 3.在visual studio code中新建vue项目 4.vue.js文件源代码的下载 三、Vue程序运行
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 5万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
如何搭建一个vue项目(完整步骤)
最新发布
y2020520的博客
05-16 2361
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。
VUE开发环境搭建
weixin_52261391的博客
05-11 5856
vue.js是一套构建用户界面的渐进式框架,Vue 采用自底向上增量 开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，是一个基于MVVM结构的轻量 级框架，非常容易与其它库或已有项目整合。安装vue需要借助npm指令集，所以一般会先安装node.js环境。1.下载node.js环境()打开node.js的官网下载地址：http://nodejs.cn/download/选择适合自己系统的安装包，本文以windows x64系统为例。选择64位安装下载安装包后正常安装，
Vue——搭建Vue开发环境
m0_53912558的博客
01-28 538
开发版本与生产版本的区别：开发版本包含了完整的警告和调试模式，生产版本删除了警告，在开发过程中最好使用开发版本，能及时的发现错误和警告。在学习中使用开发版本。1)点击绿色的开发版本，就会以Vue.js（就是一个js文件）的文件形式下载到自己的电脑上；刚开始学习Vue时最好使用传统的在HTML中引入js文件（直接使用Script标签引用）：不建议使用使用这种方法安装Vue，因为这种方法在以后写代码时都需要网络。2)打开浏览器→打开开发者工具→打开控制台。3)打开浏览器→打开开发者工具→打开控制台。
如何搭建vue开发环境
小积累
06-21 1万+
主要介绍vue开发工具、环境搭建、系统运行等内容。
vue小白入门教程
12-13
二、vue环境搭建 你直接下载并用 [removed] 标签引入， Vue 会被注册为一个全局变量。 但在用 Vue 构建大型应用时推荐使用 NPM 安装。 这里推荐一下是用淘宝的cnpm，非常的快 npm install -g cnpm --registry=...
vue实用入门教程.doc
04-28
这篇文档是针对Vue初学者的实用入门教程，旨在帮助新手从环境搭建到基础开发过程中避开常见问题。以下是对文档内容的详细解析： 首先，Vue项目的环境搭建始于Node.js的安装。在Windows系统中，可以直接从Node.js...
Vue 项目构建与开发入门.zip
07-09
本教程“Vue 项目构建与开发入门”专为初学者设计，旨在帮助你快速掌握Vue项目的搭建和开发流程。 1. **Vue CLI介绍**： Vue CLI（命令行接口）是Vue生态系统中的一个工具，用于快速设置新项目的基础结构。通过全局...
完整vue教程（环境搭建，项目实践）
02-10
完整的一套vue的介绍，环境搭建和项目实践。能带给入门的vue初学者很大收获
vue搭建环境的全过程
wfbxf的博客
04-25 463
1、创建新的空文件夹 cmd打开数据库输入指令：vue create ele-project①default（vue3 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue3项目的原型，没有带任何辅助功能的 npm包② default（vue2 babel，eslint）：默认设置（直接enter）非常适合快速创建一个新vue2项目的原型，没有带任何辅助功能的 npm包。
Vue开发环境搭建的详细教程，图文并茂
11-29
非常详细的Vue开发环境的搭建教程，有图有文，包括nodejs的安装，电脑环境变量的配置，cnpm的安装，亲测安装有效。文档最后还有一个创建并配置工程的示例。
Vue 01 - 搭建Vue开发环境
m0_53753920的博客
03-29 843
Vue介绍就不多说啦，自行谷歌或者百度吧。接下去会介绍如何搭建Vue开发环境。
前端系列：Vue入门&环境搭建、【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍
weixin_54626591的博客
12-12 6544
Vue入门&环境搭建、【vue】创建项目&项目搭建问题&项目文件介绍&.vue文件介绍
vue开发环境搭建
qq_18238727的博客
07-13 1063
执行 node -v 和 npm -v 可查看node和npm的版本号：在nodejs安装路径下，新建node_global和node_cache两个文件夹 执行如下命令，设置缓存文件路径npm config set cache "自己的\node_cache" 执行如下命令，设置全局依赖包存放路径npm config set prefix "自己的\node_global"进入 C:\Windows\System32 找到cmd.exe，以管理员身份运行打开cmd窗口，执行如下命令：npm install
Vue项目基础环境搭建完整步骤
LeungChunwai的博客
01-21 984
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是一个官方脚手架，可以帮助我们快速创建vue项目工程目录，目前最新版本4.x。public vue服务器静态文件目录，只有唯一的一个index.html。我们的开发目录，最重要的目录，源文件（我们写的代码）目录。
搭建vue项目环境步骤
weixin_43411214的博客
10-25 288
一、安装node.js环境 二、搭建vue项目环境 1、终端全局安装vue-cli 　 　npm install --global vue-cli 　2、终端输入命令：vue ui进入Vue 项目管理器创建项目 　3、在Vue 项目管理器中配置Element-UI组件库 　 （1)仪表盘插件中添加插件，搜索：vue-cli-plugin-element安装 　 （2)安装完成，在配置插件中，第一项选择import on demand(按需手动配置） 　 4、配置 axios 库
Vue基础知识总结 13：从零开始搭建Vue项目
学Java，找哪吒
02-24 1万+
一、创建项目 vue create supermall 1、报错。 vue : 无法加载文件 C:\Users\78571\AppData\Roaming\npm\vue.ps1， 2、开始处搜索powershell，以管理员的身份运行 3、输入下面的指令：set-ExecutionPolicy RemoteSigned 4、再次创建项目，成功！ 二、GitHub托管代码 1、创建仓库 2、GitHub仓库创建成功 三、项目提交到GitHub 1、第一种方式 git clone https://
Vue项目从零开始搭建
qq_38229263的博客
02-22 4939
一.准备环境 第一步 安装node.js根据实际操作系统选择安装包 下载地址：https://nodejs.org/en/download/ Cmd命令行输入 node –v检测安装是否成功 第二步 npm设置 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org Cmd命令行输入 npm –v检测安装是否成功 第三步 安装web
Vue+ElementUI前端开发手册
10-12
这份文档不仅适用于前端开发人员进行项目搭建和界面设计，同时也可供后端开发人员参考。 首先，章节1介绍了如何初始化一个Vue项目。步骤包括安装Node.js，确保命令行工具可用，切换到淘宝NPM镜像以提高安装速度，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值