如何搭建一个Vue框架

最新推荐文章于 2024-05-27 23:02:40 发布
最新推荐文章于 2024-05-27 23:02:40 发布
阅读量562 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41306240/article/details/98336575
版权

1.首先需要去官下载一个node.js.
2.打开cmd,输入node -v,查看版本
在这里插入图片描述
3.npm包管理器是集成在node中的，所以直接输入npm -v查看npm的版本信息
在这里插入图片描述
4.安装淘宝镜像输入：npm install -g cnpm --registry=http://registry.npm.taobao.org
在这里插入图片描述
5.安装vue-cli脚手架构建工具输入 npm install -g vue-cli
在这里插入图片描述
6.选择安装的目录，我这里直接安装到C盘
在这里插入图片描述
7.选择好目录后，输入指令vue init webpack +项目名称，创建项目名称
在这里插入图片描述
8.等安装完之后，可以输入cd +你建的项目名称回车再输入npm run dev
在这里插入图片描述
9.然后可以在自己创建的路径看看自己搭建的项目
在这里插入图片描述
10.在vs code中打开
在这里插入图片描述
在这里插入图片描述

杨晓尚
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue框架搭建
07-02
vue脚手架搭建的vue项目，webpacke配置文件全面。路由拦截配置
如何搭建vue框架-1
weixin_43859439的博客
09-26 5820
基于vue2版本和vue-cli(脚手架)+elementUI进行的框架搭建。搭建之前需要安装所需要的环境和工具，个人推荐使用VSCode。
创建vue框架
最新发布
2301_81525839的博客
05-27 311
建议安装淘宝镜像（会使安装vue的速度加快）：npm config set registry https://npmmirror.com/mirrors/npm/2.安装脚手架vue/cli：npm install -g @vue/cli或者yarn global add @vue/cli。11.先进入到vue文件夹（cd vue），再进行启动(npm run serve),出现以下界面则启动成功。7.选择Babel（编译工具）和Router（Vue路由）（空格键取消）10出现以下界面则创建成功。
创建一个简单的vue框架项目
lujunyu2022的博客
12-30 840
1、下载安装node,下载之后一步步默认安装即可。下载完成后安装node。
搭建一个Vue框架
热门推荐
xiaoye的博客
04-17 2万+
之前工作的时候，有段时间工作的项目是前后端分离的，感觉前后端分离的模式比较舒服，主要是自己对前后端分离的框架比较好奇，所以准备自己搭建一个基于Vue的前端框架，至于对应的后端的框架，等有时间也整理一个出来。当时因为前端缺人，只给了一个前端框架，然后自己学着使用vue，当时即写前端又写后端，由于对Vue的了解是基于应用层级的，就不细讲vue，但是想自己弄一个前端框架。 1.先安装no......
一个Vue项目框架的基本搭建
huangzhixin1996的博客
04-23 9986
一、 环境配置 1.安装Node.js 下载地址为: https://nodejs.org/en/ 以下操作都在命令行窗口进行 2.提高效率和下载速度，下载淘宝镜像：http://npm.taobao.org/ npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 3．使用npm安装vue的脚手架：npm install –g @vue/cli 二、 搭建项目 1.打
vue框架搭建之axios使用教程
10-18
因此，本教程将会介绍如何在Vue项目中搭建框架并使用Axios。 1. 安装和引入axios 在Vue项目中使用Axios首先要进行安装。可以通过npm或yarn来安装axios包，命令如下： ```bash npm install axios --save-dev # 或者 ...
Vue框架总结.pdf
04-03
Vue实例是Vue框架的核心，它是一个包含了Vue配置的对象，如数据、方法、生命周期钩子等。Vue实例创建后，可以通过`data`属性声明响应式数据，`methods`属性定义组件的方法，`mounted`等生命周期钩子可以在特定时刻...
vue2+webpack搭建h5框架
03-12
Vue2是一个轻量级的JavaScript框架，它提供了声明式的数据绑定和组件化功能，使得开发者能更容易地构建用户界面。Webpack则是一个模块打包器，它可以将各种资源（如JavaScript、CSS、图片等）进行打包和优化，以便在...
vscode 搭建一个vue项目.doc
08-07
VSCode 是一个功能强大且灵活的代码编辑器，Vue 是一个流行的前端框架。本资源将指导您如何在 VSCode 中搭建一个 Vue 项目，从安装依赖项到项目的创建和发布。 一、安装依赖项 1. 安装 Node.js：Node.js 是一个 ...
如何搭建一个vue项目(完整步骤)
y2020520的博客
05-16 1万+
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-cli 的时候无法从GitHub上下载模板
羊羊毛卷卷
08-13 380
输入命令vue init webpack 项目名创建vue-cli脚手架的时候报错 vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFO UND github 该怎么办呢？接下来检查下面四个命令是否都能显示版本号吧： node -v npm -v vue -V webpack -v 如果都能正常显示版本号的话，那就没问题啦~~ 最后执行vue init webpack 项目名 juan最后附一张效果图给
vue框架环境搭建
weixin_43859703的博客
03-17 181
1.安装nodejs； 2.搭建vue开发环境，安装vue的脚手架工具（使用cnpm淘宝镜像工具），在cmd输入以下命令即可 npm install -g cnpm --registry=https://registry.npm.taobao.org npm install –global vue-cli 3.创建项目 以下就以vuelist为项目名称 在vscode终端输入以下命令； 1） ...
Vue框架初步搭建
m0_44993395的博客
08-02 131
前言 目前的流行前端框架Angular、Vue、React，下文我们将学习如何初步搭建Vue框架 搭建 安装node.js 通过npm命令安装Vue，使用淘宝的cnpm镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli脚手架，使用命令:cnpm install --global vue-cli 在本地磁盘创建一个文件夹，用于存放Vue项目，然后cd到该目录下 使用命令：vue init webpack 项目
vue框架快速搭建
Lione10的博客
02-18 3562
vue框架快速搭建，有手就行
【前端】搭建一个VUE框架
qq_45825645的博客
03-15 1792
大伙好，最近狠狠焦虑了，因为想搞前端技术岗找暑假实习担心自己能力不够，还是希望如果有同学大学期间就决定毕业找工作的话，一定要抓住机会大学期间狠狠锻炼本领噢，不要虚度光阴 说了点题外话，回到正题，焦虑的时候狠狠学习就好了 想投前端又碰上软工课设，小组想基于VUE框架制作大学生社群的校园在线音乐平台，于是有了今天的这篇博客 ...
命令行搭建vue的项目框架
微微一芯的博客
11-15 7646
1.首先安装node和npm 2.安装vue： npm install -g vue-cli //-g表示全局安装，vue-cli是模块，全局安装的模块可以在命令行直接使用 由于npm网站在国内速度非常慢，所以可以在命令后面加上淘宝的镜像 即：npm install -g vue-cli --registry=https://registry.npm.taobao.org
Vue框架搭建
yeshen.org
03-21 365
之前写kotlin论坛的时候搭过，然后大概是太简单了，没留下笔记，最近需要用到，蒙圈了一会，还是补下笔记。 新建项目 用的是webpack的脚手架,细节文档参考 http://vuejs-templates.github.io/webpack/ https://vue-loader.vuejs.org/ npm install -g vue-cli vue init we...
使用vue搭建一个app框架
04-03
以下是使用Vue搭建一个app框架的步骤： 1. 创建一个Vue项目 可以使用Vue官方提供的Vue CLI工具创建一个新的Vue项目，也可以手动创建一个Vue项目。 2. 安装相关依赖 在创建好的Vue项目中，需要安装一些相关的依赖库，例如vue-router、vuex、axios等。 可以使用npm命令安装这些依赖库： ``` npm install vue-router vuex axios --save ``` 3. 配置路由和状态管理 在src目录下创建一个router.js文件，用于配置路由规则。在src目录下创建一个store.js文件，用于配置状态管理。 4. 创建视图组件 在src目录下创建一个views目录，用于存放各个视图组件。可以根据实际需要创建不同的视图组件。 5. 创建公共组件 在src目录下创建一个components目录，用于存放公共组件。例如Header、Footer等组件可以放在这里。 6. 创建App.vue组件 在src目录下创建一个App.vue组件，用于定义整个app的布局和结构。 7. 在main.js中引入依赖库和组件 在main.js文件中，引入相关依赖库和组件，并实例化Vue对象。 8. 在App.vue中配置路由和状态管理 在App.vue中引入router和store对象，并在template中使用router-view和vuex的mapState、mapActions等指令。 9. 运行Vue项目 在命令行中运行npm run serve命令，启动Vue项目。可以在浏览器中访问http://localhost:8080查看效果。 以上就是使用Vue搭建一个app框架的步骤。需要根据实际需求进行调整和修改。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值