Vue2.0搭建脚手架(vue-cli)

news2025/2/27 14:11:06

目录

前言

一、npm安装

二、搭建脚手架

1.安装脚手架vue-cli

2.搭建项目


前言

vue大概内容:

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。下面将演示搭建Vue2的脚手架搭建。


一、npm安装

在用 Vue 构建大型应用时推荐使用 npm安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

打开命令行工具(win+r,然后输入cmd),输入以下代码:

node -v

若出现相应版本号表示已经安装;若没有则安装node.js,从node.js官网(Node.js 中文网)下载并安装node,安装过程很简单,一直“下一步”即可。在官网下载安装node.js后,就已经自带npm 了。

npm配置淘宝镜像源

直接通过npm下载Vue时,下载速度慢,可以通过配置淘宝镜像源,输入以下代码:

npm config set registry https://registry.npm.taobao.org

二、搭建脚手架

1.安装脚手架vue-cli

代码如下(示例):

npm install -g @vue/cli

 在命令行输入vue -V,若出现相应的版本号则安装成功。

2.搭建项目

选择搭建项目的路径,我就放到桌面了(选择路径,在命令行中输入:cd 文件路径)

cd C:\Users\Wang\Desktop

输入:vue create 项目文件名字(我就叫vue了)

vue create vue

 通过键盘上下键,选择Vue 2版本,按回车,即开始下载所需文件了。

 当出现 Successfully created project vue. 则表示已成功搭建Vue脚手架

 

 在命令行输入:cd vue 选择在vue文件夹下,npm run serve,即可运行项目了

cd vue
npm run serve

点击:http://localhost:8080/ 即可进入vue已为我们搭建好的HelloView

以上就是Vue2.0脚手架的搭建啦。

如果浏览器页面打不开或者是没有加载页面,有可能是本地8080端口被占用,或者是你关闭了这个项目。

在命令行直接按两次 ctrl+c 即可结束项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405196.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端+后端项目 - 论坛信息管理系统(Web+servlet+MySQL+JDBC)

🤞目录🤞 💖一. 准备工作 💎1) 创建 web 项目 💎2) 创建目录结构 💎3) 配置 pom.xml 💖二. 数据库操作代码 💎1. 数据库设计 1.1 ER图 1.2 ER图转化为关系模型并优化 1.3 创…

(全网最详细!!)npm:无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

文章目录问题概述一、分析原因二、解决办法1.安装node.js(1)下载并安装(2)配置环境(3)打开CMD,检查是否正常path路径是否正常。(4)安装完成后测试下nodejs和npm是否安装成…

前端js调用后端API获取数据的三种方法(2022.7.25)

前端js调用后台API获取数据的三种方法(2022.7.25)前言需求分析一个Get实例浏览器请求SoapUI软件请求一个Post实例浏览器请求SoapUI软件请求1、Http简介(Browser / Server)1.1 六个主流的浏览器1.2 HTTP请求(Get & …

java后端+前端使用WebSocket实现消息推送

java后端前端使用WebSocket实现消息推送(流程详细代码)创建WebSocket的简单实例操作流程1.引入Websocket依赖2.创建配置类WebSocketConfig3.创建WebSocketServer4.websocket调用前端WebSocket连接OK,下课!!!在项目的开…

【uploader】表格化自整理vue-simple-uploader的文档(超详细)

文章目录1.vue-simple-uploader介绍2.安装和配置3. 组件标签的文档整理3.1 uploader标签3.2 uploader-btn标签3.3 uploader-drop标签3.4 uploader-list标签3.5 uploader-file标签3.6 uploader-unsopport标签4.请求中的参数轮子的github链接:两个项目的文档要结合着看…

HTML可用于情侣表白的爱心代码~,赶紧跟着操作,让她也拥有属于你的爱心吧。

文章目录前言一、效果图二、操作步骤第一步第二步第三步第四步第五步第六步源码前言 最近随着电视剧《点燃我温暖你》的火热播出,剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈,爱心素材也异常火爆,我在这里整理了一份大家有需自取哦~ 可用于…

【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由(详解版)和 路由的模糊匹配,重定向以及嵌套…

vue安装及环境配置

目录 1.安装 Node.js 2.配置默认安装目录和缓存日志目录 3.配置环境变量 4.配置淘宝镜像 5.安装vue和脚手架 6.创建并运行项目 1.安装 Node.js Download | Node.js 在这里👆下载的是最新版,如果要安装以前的版本👇,页面往下…

3分钟让你学会axios在vue项目中的基本用法(建议收藏)

Axios酸狗来教你 提示:本篇详解axios在vue项目中的实例。在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用。 文章目录Axios酸狗来教你Axios简介…

JavaScript之正则表达式的使用方法详细介绍

目录 I. 序言:JavaScript中正则表达式的使用场景 II. 创建第一个正则表达式 III. 常见的正则表达式属性 📕 三种匹配规则 📕 五种常见属性 📕 规则g的使用详解 IV. 常见的正则表达式方法举例介绍 📘 test方法 …

idea构建web项目-超详细教程

1、idea构建web项目 idea构建web项目的超级详细教程,一步一步来,完全没问题! 1、新建一个空项目 2、新建java模块,名为webDemo1 3、选择webDemo1右键,选择Add Framework Support 选择Web Application 4、在WEB-…

Geeker-Admin项目跟做笔记(vue3+vite+pinia)

文章目录一、路由配置(一) 静态路由(二)动态路由二、axios的配置1. 创建axiosCancel.ts文件,用于有pending后直接取消2. axios封装3. 使用三、pinia仓库的使用四、Header 设计笔记1. 国际化(中英文切换&…

【小程序开发】—— 封装自定义弹窗组件

文章目录🍋前言:🍍正文1、探讨需求封装popup自定义弹窗组件2、实战开发弹窗组件2.1 子组件内容 popup.vue文件2.2 父组件引用子组件3、效果图预览3.1 不使用具名插槽的原有样式效果3.2 使用具名插槽之后样式效果🎃专栏分享&#x…

快速掌握Nginx部署前端项目(从Nginx安装配置及部署都非常详细哦!)

前言: 之前在Linux系统中部署了后端项目,今天继续来给大家分享如何部署前端项目。 涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目 Nginx是一个轻量级的反向代理web服务器,在当今应用地非常广泛,特别是前…

vue的proxy代理详解

一、proxy常用参数说明 module.exports {publicPath: "/",devServer: {proxy: {"/api": {// 代理名称 凡是使用/api开头的地址都是用此代理target: "http://1.2.3.4:5000/", // 需要代理访问的api地址changeOrigin: true, // 允许跨域请求pa…

[Node.js]如何在IDEA中配置Node.js

【目录】 一、下载Node.js 二、安装Node.js 三、配置Node.js 四、测试Node.js 一、下载Node.js 官网下载链接:Node.js 点击下图红色标注区域,即可下载msi文件 二、安装Node.js 打开msi文件 一路点击“Next”(建议自定义文件安装路径&#xf…

vue3的基本使用(超详细)

一、初识vue3 1.vue3简介 2020年9月18日,vue3发布3.0版本,代号大海贼时代来临,One Piece特点: 无需构建步骤,渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jams…

使用小程序制作一个电子木鱼,功德+1

此文主要通过小程序制作一个敲木鱼的小工具,在心烦意乱的时候缓解一下焦虑。 一、创建小程序二、设计页面三、代码块一、创建小程序 访问微信公众平台,点击账号注册。选择小程序,并在表单填写所需的各项信息进行注册。在开发管理选择开发设置,将AppID及AppSecret复制出来进…

Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法

点击vue路由跳转,控制台报错:Avoided redundant navigation to current location: “/xxxxxx“解决方法 一、描述问题 在使用this.$router.push跳转页面时候,重复点击菜单引起路由重复报错 比如当前页面显示区是路由组件‘/cats’&#xff…

关于js 中 try catch用法

try…catch语法,简单来说就是用来捕获异常的,我就简述一下我遇到的问题 当使用vuex在actions发请求时,这个接口不仅可以添加购物车数据,同时也可更新产品的数量,我就在更新产品数量的地方出现了问题, 先说说…