Vue脚手架的基本使用

最新推荐文章于 2023-07-11 07:00:00 发布
最新推荐文章于 2023-07-11 07:00:00 发布
阅读量235 收藏
点赞数
分类专栏： vue框架 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziyue13/article/details/120805548
版权

Vue脚手架用于快速生成Vue项目基础架构

使用步骤：
安装Vue脚手架
npm install -g @vue/cli

基于脚手架的图形化界面创建Vue项目
在终端中输入vue ui命令，打开图形化界面

在这里插入图片描述
必须选择一个空的文件夹，当中没有vue.js文件才能创建项目，否则会报错
Cannot read property ‘indexOf’ of undefined
在这里插入图片描述
在这里插入图片描述
选择babel，linter，router，配置文件

在这里插入图片描述
配置选择标准配置，点击创建项目

在这里插入图片描述

在这里插入图片描述

点击运行可以运行项目，再点击启动app会打开项目的网页，可以查看效果
在这里插入图片描述
Vue脚手架自定义配置
在这里插入图片描述

st紫月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue脚手架vue-cli的学习使用教程
12-07
vue-cli的模板 vue-cli的脚手架项目模板有webpack-simple 和 webpack 两种的区别在于webpack-simple 没有包括Eslint 检查等功能 vue-cli的项目结构 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js
VUE脚手架具体使用方法
10-16
Vue.js脚手架，即Vue CLI（Command Line Interface），是一个官方提供的强大构建工具，它简化了基于Webpack的项目设置，让开发者可以快速地初始化并构建Vue.js应用。Vue CLI通过预设的配置，免去了手动配置Webpack的...
VUE脚手架使用教程
CJKardinal的博客
05-27 789
VUE脚手架使用教程 前言：在上章节的使用教程中，我说过了哈，组件使用的问题了吧，好的，那么我们如何解决这一问题只能采用VUE的脚手架组件了，VUE的脚手架在英文中叫做（VUE-CLI）要记得哈，不然面试就去了哟，好的，接下来我们就来了解下VUE脚手架的使用吧，在这之前我们需要先安装一些软件才可以哟，HBuilder已经阵亡了，不能搭建VUE脚手架这个框架了… 1、WebStorm软件安装 WebStorm是一款IDE工具和HBuilder类似，但是他可以支持使用DOS命令界面，并且可以支持更多的文件格式的
Vue脚手架使用步骤
weixin_43778272的博客
07-05 388
Vue脚手架使用步骤 1、安装webpack 全局安装webpack命令行： npm install webpack -g 2、安装vue-cli脚手架构建工具 全局安装，输入命令行： npm install vue-cli -g 安装完成后执行命令: vue -V 查看版本号，出现相应得版本即为安装成功 3、通过vue-cli，初始化vue项目 通过以上几步，将我们安装脚手架所需要的环...
vue脚手架的简单使用
m0_57009858的博客
05-06 186
vue脚手架的使用 文章目录vue脚手架的使用一、创建项目1.cmd黑窗口输入命令2.浏览器打开3.点击项目管理器4.选择创建路径5.预设6.功能7.配置8.完成二、脚手架项目的文件夹三、SPA单页面应用程序1.Vue组件 一、创建项目 1.cmd黑窗口输入命令 2.浏览器打开 3.点击项目管理器 4.选择创建路径 5.预设 6.功能 7.配置 8.完成 注意：创建项目过程中cmd命令窗口不要关闭 二、脚手架项目的文件夹 public：固定的两个文件，一个是html，一个是图标
Vue脚手架基本使用方法
wgchen
02-03 531
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脚手架及vue-router基本使用
08-27
本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。 首先，确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`（推荐使用 cnpm，因为它比 npm 更快，且更少出现安装问题）之后，你可以开始...
vue脚手架（纯净版）
07-10
以上就是关于“vue脚手架（纯净版）”的基本知识和使用流程，通过这个工具，开发者可以快速、高效地进行Vue项目的开发。在实际工作中，根据项目需求，灵活运用Vue CLI的各种特性，可以显著提升开发效率和代码质量。
vue脚手架搭建过程图解
08-27
Vue CLI（命令行接口）或Vue脚手架是一个官方提供的工具，它能帮助开发者快速初始化一个新的Vue项目，包含了一整套自动化构建工具，如编译、热重载、代码分割、优化等。在开始搭建Vue脚手架之前，我们需要确保已经...
vue脚手架vue脚手架vue脚手架vue脚手架vue脚手架
04-26
Vue脚手架（Vue CLI）是Vue.js官方提供的一个命令行工具，用于快速搭建 Vue 项目，它极大地简化了项目的初始化过程，帮助开发者设置和配置项目环境，提高开发效率。 Vue CLI 提供了丰富的预设选项，包括Webpack配置...
Vue 脚手架-基本使用
FellAsleep的博客
02-19 4131
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（四）Vue脚手架——手把手教你安装和使用
热门推荐
io_123io_123的博客
01-21 2万+
Vue脚手架的安装与配置，脚手架的文件结构、我的第一个脚手架项目
【vue系列-07】vue脚手架的基本使用
zhenghuishengq的博客
01-18 6682
深入理解vue的基本使用
Vue脚手架使用 【实战篇】
每日一记，每周一结。
07-11 328
（1）在子组件中使用props来声明变量 用来接受父组件传递的数据。（2）父组件在使用子组件时 属性名来传递。
vue脚手架的基本使用
qq_45839045的博客
04-03 1086
学Vue 目标: 更少的时间,干更多的活. 开发网站速度, 快 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js 开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通) 现在很多项目都是用vue开发的 Vue是什么 渐进式javacript框架, 一套拥有自己规则的语法 官网地址: https://cn.vuejs.org/ (作者: 尤雨溪) 渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用 什
vue脚手架的使用，下载依赖方法
团酱
12-12 8106
安装： npm install -g @vue/cli 创建一个文件夹 vue create pro 选择Manually select features 自行进行配置（下面的进行参照） 之后进入 文件 并运行 cd pro npm run serve 浏览器中打开即可 ...
vue-cli（脚手架）教程
weixin_43736639的博客
02-19 571
1.vue-cli安装 （1）安装node.js 在node.js官网中下载安装，检查是否安装完成，在cmd中输入“node -v”，若安装完成，会出现版本号。 npm包管理器是在node中集成的，安装了node.js,也就有npm，输入“npm -v”查看版本号。 （2）安装cnpm 使用淘宝镜像安装依赖，输入命令：npm install -g cnpm --registry=http://registry.npm.taobao.org （3）安装vue...
Vue（三）使用Vue脚手架
weixin_58598560的博客
05-30 3932
/ 全局过滤器})// 定义全局指令// 指令与元素成功绑定时（一上来）},// 指令所在元素被插入页面时},// 指令所在的模板被重新解析时})//定义混入data() {return {x: 100,y: 200},})//给Vue原型上添加一个方法（vm和vc都能用）alert('你好啊！')1、拆分静态组件组件要按照功能点拆分，命名不要与html元素冲突2、实现动态组件考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：（1）
【Vue系列】Vue-cli（Vue脚手架）详细教程
pakerder的博客
11-01 2182
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试..本篇文章全面了解Vue中的脚手架用法及总结。
vue脚手架如何安装和使用
最新发布
08-18
Vue 脚手架（Vue CLI）是一个基于 Node.js 的命令行工具，用于快速搭建 Vue.js 项目。以下是安装和使用 Vue 脚手架的步骤： 1. 安装 Node.js：Vue CLI 是一个 Node.js 工具，因此首先需要安装 Node.js。在 Node.js 官网（https://nodejs.org/）下载适合您操作系统的版本并安装。 2. 安装 Vue CLI：在命令行中输入以下命令安装 Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建一个新的 Vue 项目：在命令行中输入以下命令来创建一个新的 Vue 项目： ``` vue create my-project ``` 其中，`my-project` 是您要创建的项目的名称。运行该命令后，Vue CLI 将提示您选择要安装的 preset（预设），即项目的基本配置。可以选择默认预设或手动选择所需的配置选项。 4. 运行 Vue 项目：在命令行中进入您创建的项目的目录并运行以下命令来启动开发服务器： ``` cd my-project npm run serve ``` 该命令将启动开发服务器并在浏览器中打开项目。 这就是使用 Vue 脚手架创建和运行一个简单的 Vue 项目的步骤。有关更多信息，请参阅 Vue CLI 的官方文档（https://cli.vuejs.org/）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值