vue脚手架的安装与使用

最新推荐文章于 2024-03-31 01:37:19 发布
最新推荐文章于 2024-03-31 01:37:19 发布
阅读量202 收藏
点赞数
分类专栏： 软件配置 文章标签： vue.js npm node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48102416/article/details/124712796
版权

文章目录

vue是什么？

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

一 安装node.js

官网 https://nodejs.org/zh-cn/

在这里插入图片描述
在这里插入图片描述
下载图中的安装包

双击安装包安装

在这里插入图片描述

安装完成后使用 node -v 查看是否安装以及安装版本

node -v 查看node版本
npm -v 检查NPM版本
在这里插入图片描述

切换淘宝NPM库（国内镜像地址，下载速度快）

1). npm install -g cnpm --registry=https://registry.npm.taobao.org
方式2:
2). npm config set registry https://registry.npm.taobao.org (建议使用第二种)

检查镜像配置是否生效 npm config list

npm config list 命令
在这里插入图片描述

二 安装vue

安装VUE和客户端

npm install -g @vue/cli --force

等待安装完成之后即可.
ps: 如果报错，删除用户目录下的文件,之后重新安装. (删除文件 不要删除目录) 或者 执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

初始化vue工程

vue ui

在这里插入图片描述

选择VUE 创建项目

在这里插入图片描述

选择项目

在这里插入图片描述
选择:手动
在这里插入图片描述

选择功能

在这里插入图片描述

选择ESLint+ StandardConfig

在这里插入图片描述

项目创建之后效果

在这里插入图片描述

初始化项目

安装插件

在这里插入图片描述
安装成功之后会提示配置插件 选择手动导入

安装axios，less-loader，less，vue-quill-editor，echars依赖

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

关闭ESLint校验

在这里插入图片描述

小码不掉头发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4499
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
Vue脚手架的初次了解/使用
港猫鱼未归的博客
08-08 477
vue脚手架的使用
Vue脚手架安装与使用
杨大脸的博客
04-14 208
vue脚手架的基本使用 #1.安装vue脚手架 npm install -g @vue/cli 2.vue脚手架的基本用法 // 1. 基于 交互式命令行 的方式，创建 新版 vue 项目 vue create my-project // 2. 基于 图形化界面 的方式，创建 新版 vue 项目 vue ui // 3. 基于 2.x 的旧模板，创建 旧版...
使用vue-cli（vue脚手架）快速搭建项目，直通大厂
最新发布
qd520_1314的博客
03-31 600
5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-only的区别1、runtime-compiler加载过程2、runtime-only加载过程：（性能更高，代码更少）3、小结4、代码实例5、npm run build执行过程6、npm run dev执行过程四、认识Vue CLI31、vue-cli 3 与 vue-cli 2 版本的区别？2、通过脚手架3构建项目五、箭头函数1、定义函数的三种方式2、箭头函数参数和返回值3、什么
VueCLI 脚手架安装与使用
SevenOne
11-22 334
一、脚手架 Vue CLI （一）介绍 使用 vue 开发大型项目时，我们需要考虑代码目录结构。项目结构和部署，热加载、代码单元测试等事情。 通常我们会使用一些脚手架工具来提高开发效率。 （二）CLI 是什么 CLI 是 Command-Line Interface 的简写，翻译为命令行界面，俗称脚手架。 Vue CLI 是一个官方发布的 vue.js 项目脚手架。 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。 （三）使用脚
Vue安装脚手架及使用全过程
m0_52553037的博客
02-22 322
web-pack脚手架全流程教学加图片
vue 创建项目之后，我们需要做什么？
vgub158的博客
06-29 2252
vue 创建项目之后，我们需要做什么？前言创建项目雪碧图（精灵图）全局注入 scss 变量打包分离公共库注入全局变量删除 console.log代码分割配置 CDN图片压缩IgnorePlugin代码规范关于CICD（自动部署）总结 前言 现在我们做项目基本都是使用脚手架来初始化项目，不得不说脚手架减少了我们很多工作量。但是我们还需要根据项目的特点，对配置文件进行修改，从而使得我们的开发更加方便快速，甚至还可以做一些性能上的优化。本文就总结一下我使用 vue 脚手架创项目之后所做的一些修改。 创建项目 首先
Vue脚手架的简单使用实例
10-18
主要介绍了Vue脚手架的简单使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE脚手架具体使用方法
10-16
主要介绍了VUE脚手架具体使用方法，vue-cli这个构建工具大大降低了webpack的使用难度，小编觉得不错，下面就一起来了解一下具体使用方法
vue脚手架及vue-router基本使用
08-27
主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下
第一章 Vue脚手架安装.pdf
06-20
NodeJS下载安装，安装cnpm淘宝镜像，安装vue脚手架，创建第一个Vue项目，使用vue create方式创建项目，使用webpack模板创建项目
vue脚手架安装过程
01-29
vue脚手架安装过程,只是简单的介绍了vue-cli的安装过程
vue脚手架安装及创建、运行项目教程
交小新的博客
04-09 4031
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
Vue（四）Vue脚手架——手把手教你安装和使用
热门推荐
io_123io_123的博客
01-21 2万+
Vue脚手架的安装与配置，脚手架的文件结构、我的第一个脚手架项目
vue脚手架的安装和使用
weixin_64037609的博客
11-07 297
vue的脚手架工具——vue/cli特点Vue CLI 是⼀个基于 Vue.js 进行快速开发的完整系统Vue CLI: Vue command line interface vue命令行接口特点:1.一个运行时依赖 (@vue/cli-service)，该依赖：2.可升级；3.基于 webpack 构建，并带有合理的默认配置；4.可以通过项目内的配置文件进行配置；5.可以通过插件进行扩展。6.一个丰富的官方插件集合，集成了前端生态中最好的工具。
Vue脚手架的安装与使用
wangheng_hd的博客
03-29 128
安装： 电脑需要安装node软件: http:/ / nodejs.cn/download/ 使用 node -v 查看版本, 目前最高 16.11 2.确保 npm 是中国镜像: 查看当前镜像: npm config get registry 设置淘宝镜像: npm config set registry https:/ / registry.npm.taobao.org/ 3.利用npm 安装 vue 的脚手架软件 安装...
VUE.JS-props声明接收
XiaoSen207的博客
11-29 290
<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 6639
深入理解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
发出的红包

打赏作者

小码不掉头发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值