Vue脚手架的基本用法

最新推荐文章于 2024-09-12 07:50:54 发布
最新推荐文章于 2024-09-12 07:50:54 发布
阅读量680 收藏 5
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525630/article/details/119380159
版权

今天将Vue脚手架用法的基本知识分享给大家

文章目录

一、安装脚手架

如果还没有安装node.js需要先安装一个node.js，然后进入命令行，使用npm install -g @vue/cli命令安装脚手架，换淘宝的源可以下载得快一些

//换淘宝源
npm config set registry https://registry.npm.taobao.org
//查看源
npm config get registry

在这里插入图片描述

在这里插入图片描述
安装完可以用vue -V命令查看版本
在这里插入图片描述

二、基于ui界面创建Vue项目

命令行使用vue ui指令，在自动打开的创建项目网页中配置项目信息。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

可以选择默认可以选择自己创建过的模板，这里第一次使用选择手动配置

在这里插入图片描述
这里选择该选的内容，Babel和router基本项目都会用到就都选，选择使用配置文件是使这些配置文件可以存为单独的文件不会都放到package.json文件中比较清晰
在这里插入图片描述

在这里插入图片描述
选择vue.js的版本这里选择默认2.x就行，是否使用历史模式的路由默认是关闭的，linter和formatter配置文件选择标准版本的配置文件就行，line featrues选择默认的就行
在这里插入图片描述
创建项目会弹出如下提示框，因为这里之前我们已经进行了许多的配置操作，这里我们可以选择保存预设方便下次快速生成。

在这里插入图片描述

创建完成后这里可以选择Vue项目管理器来看当前用这个可视化面板创建了几个项目

在这里插入图片描述

在这里插入图片描述

插件栏可以看项目里面安装了哪些插件，可以相应进行添加和删除插件的操作

在这里插入图片描述
依赖栏可以看我们安装了多少第三方的依赖包，也可以进行相应的安装和卸载操作
在这里插入图片描述
配置栏可以进行相应的配置
在这里插入图片描述
在任务面板中提供了相应的命令，serve和build是平时用得比较多的，serve是用来实现开发期间的打包和运行的，build是把项目发布成一个成品的项目上线去运行的
在这里插入图片描述

serve点击运行此时就会进行项目的开发调试，编译成功后显示如下，需要查看效果我们可以点击启动app十分方便

在这里插入图片描述

至此脚手架的基本使用就完成了

在这里插入图片描述

总结

以上就是今天要跟大家分享的Vue脚手架的基本用法的内容

vegetable-WEN
关注
专栏目录
VUE脚手架具体使用方法
10-16
Vue.js脚手架，即Vue CLI（Command Line Interface），是一个官方提供的强大构建工具，它简化了基于Webpack的项目...通过掌握Vue CLI的使用方法，你可以快速搭建起一个功能完善的Vue项目，并享受到现代前端开发的便利。
Vue 脚手架-基本使用
FellAsleep的博客
02-19 4170
1.脚手架-介绍与安装 webpack自己配置环境繁琐官方提供脚手架, 快速搭建项目基础结构 安装@vue/cli全局模块包, 得到Vue命令, 用于以后创建Vue脚手架项目 步骤: 1.全局安装@vue/cli模块包 yarn global add @vue/cli 或者 npm install -g @vue/cli 2.查看版本号 vue -V 2.脚手架-创建项目-启动服务 步骤: 0.新建项目文件夹在 窗口执行cmd命令 1.创建项目: vue cr
vue脚手架安装及创建、运行项目教程
交小新的博客
04-09 4169
1.下载node.js 如果是window7系统: 下载安装13的版本 2).安装node.js 之后一路下一步安装即可. 3).检查node js版本 cmd中任意位置输入 node -v npm -v 进行检查 5).切换淘宝NPM库 5.1).npm install -g cnpm --registry=https://registry.npm.taobao.org 方式2: 5.2).npm config set registry https://registry.npm.taobao.org
ElementUI 快速入门：使用 Vue 脚手架搭建项目
m0_53117341的博客
09-12 1446
ElementUI 是 Vue.js 的强大 UI 框架，让前端界面开发变得简单高效。本教程将带你从安装到实战，快速掌握 ElementUI 的核心技巧。核心内容：项目搭建： 快速设置 Vue 项目并集成 ElementUI。组件使用： 学习如何在你的 Vue 应用中使用 ElementUI 组件。页面与路由： 创建组件，配置路由，实现页面导航。样式与图标： 定制按钮样式，使用图标库增强界面。
VUE.JS-props声明接收
XiaoSen207的博客
11-29 318
<template> <div> <h1>{{msg}}</h1> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <h2>学生年龄：{{myAge+1}}</h2> <button @click="updateAge">尝试修改收到的年龄</button> </div> </tem
【vue系列-07】vue脚手架的基本使用
zhenghuishengq的博客
01-18 6715
深入理解vue的基本使用
Vue（三）使用Vue脚手架
weixin_58598560的博客
05-30 4231
/ 全局过滤器})// 定义全局指令// 指令与元素成功绑定时（一上来）},// 指令所在元素被插入页面时},// 指令所在的模板被重新解析时})//定义混入data() {return {x: 100,y: 200},})//给Vue原型上添加一个方法（vm和vc都能用）alert('你好啊！')1、拆分静态组件组件要按照功能点拆分，命名不要与html元素冲突2、实现动态组件考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：（1）
vue脚手架及vue-router基本使用
08-27
本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。 首先，确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`（推荐使用 cnpm，因为它比 npm 更快，且更少出现安装问题）之后，你可以开始...
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js...
Electron-vue脚手架改造vue项目的方法
10-17
在本文中，我们将深入探讨Electron的基本概念，Electron-vue的特点，以及如何使用Electron-vue改造已有的Vue项目。 1. **Electron基础** Electron是一个开源框架，它允许开发者使用JavaScript、HTML和CSS来创建跨...
使用Vue脚手架
m0_72713521的博客
01-04 861
使用vue脚手架之前安装Node.js服务器Tomcat服务器（属于后端服务器，运行Java代码 默认端口号8080，端口号不可延申第一步：安装Node.js服务器；（属于是前端服务器，运行前端代码，默认端口号8080默认端口号被占用时，端口号可延申 例如：8081、8082等）；注意：两个服务器同时使用时，先启动Tomcat在启动Node,因为Node端口号可以延申，而Tomcat端口号不会延申，容易被占用；安装Node,双击打开，一直点击下一步，知道软件运行完成，点击关闭；
vue-cli脚手架的安装与使用
没有途径，只有努力
03-16 1306
VueCLI脚手架1、安装1.1----安装插件1.2----安装脚手架测试是否安装成功2、使用2.1----创建项目使用图形界面(推荐)使用命令行创建2.2----运行项目3、项目结构3.1----项目大致图3.2----目录说明练习实现效果图 1、安装 1.1----安装插件 vscode插件(vue代码提示)vetur 1.2----安装脚手架 npm install -g @vue/cli 测试是否安装成功 vue -V 打印版本号即安装成功~ 2、使用 官网:https://cli
vue脚手架基本使用
m0_64205564的博客
11-20 1213
终端输入npm run dev，然后打开localhost:8080就可以看到项目运行啦 ![在这里插入图片描述](https://img-blog.cs 【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】 浏览器打开：qq.cn.hn/FTf 开源分享 dnimg.cn/20190707201349774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM.
Vue（四）Vue脚手架——手把手教你安装和使用
热门推荐
io_123io_123的博客
01-21 2万+
Vue脚手架的安装与配置，脚手架的文件结构、我的第一个脚手架项目
【Vue第3章】使用Vue脚手架_Vue2
为技术发烧而生
12-09 941
目录3.1 初始化脚手架3.1.1 说明3.1.2 具体步骤3.1.3 模板项目的结构3.1.4 笔记与代码3.1.4.1 笔记3.1.4.2 01_src_分析脚手架3.2 ref与props3.2.1 ref3.2.2 props3.2.3 笔记与代码3.2.3.1 笔记3.2.3.2 02_src_ref属性3.2.3.3 03_src_props配置3.3 混入3.3.1 笔记与代码3.3.1.1 笔记3.3.1.2 04_src_mixin混入(合)3.4 插件与scoped样式3.4.1 笔记与
Vue脚手架基本使用方法
wgchen
02-03 548
1 安装3X版本的Vue脚手架 npm install -g @vue/cli cnpm install -g @vue/cli C:\Users\Administrator>vue -V @vue/cli 4.2.2 2 创建项目图形界面启动 [root@bogon ~]# vue ui ???? Starting GUI… ???? Ready on http://localhost:8000 3 选择路径创建新项目 下一步 4 手动配置项目 5 选择开启功能 Babel 是一个工具链
Vue脚手架使用步骤
sky_LQ的博客
06-19 1万+
1、安装webpack全局安装webpack命令行： npm install webpack -g2、安装vue-cli脚手架构建工具全局安装，输入命令行： npm install vue-cli -g安装完成后执行命令:   vue -V 查看版本号，出现相应得版本即为安装成功3、通过vue-cli，初始化vue项目通过以上几步，将我们安装脚手架所需要的环境和工具都准备好好了，下面就可以使用vu...
Vue脚手架使用 【实战篇】
每日一记，每周一结。
07-11 358
（1）在子组件中使用props来声明变量 用来接受父组件传递的数据。（2）父组件在使用子组件时 属性名来传递。
12.Vue - 脚手架初使用
weixin_51351637的博客
09-08 488
vue.js与vue.runtime.xxx.js的区别vue.js是完整版的Vue，包含：核心功能+模板解析器vue.runtime.xxx.js是运行版的Vue,只包含：核心功能，没有解析器vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到createElement函数去指定具体内容。
vue脚手架用法案例及意义详解
最新发布
10-12
Vue CLI（Vue Command Line Interface），即Vue的脚手架工具，它是一个命令行界面，用于快速生成、配置并启动 Vue.js 项目。以下是使用Vue CLI的一个简单案例： 1. 安装：首先确保已经全局安装了Node.js，然后通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值