当前位置: 首页 > news >正文

创建vue项目:vue脚手架安装、vue-cli安装,vue ui界面创建vue工程(vue2/vue3),安装vue、搭建vue项目开发环境(保姆级教程二)

今天讲解 Windows 如何利用脚手架创建 vue 工程,以及 vue ui 图形化界面搭建 vue 开发环境,这是这个系列的第二章,有什么问题请留言,请点赞收藏!!!

文章目录

      • 1、安装vue-cli脚手架
      • 2、vue ui创建vue项目
        • 2.1 自定义创建路径
        • 2.2 界面创建步骤
        • 2.4 创建过程中可能会遇到的问题
      • 3、vue项目目录结构

提示: 在学习下面内容时,请确保自己电脑上已经搭建好 node 环境,以及熟悉 npm 命令行。如果没有,请点击下面链接第一章:
第一章链接引入:node 下载安装配置,搭建 node 环境
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1、安装vue-cli脚手架

使用 npm 安装 vue-cli 脚手架(脚手架:是一个基于 Vue.js 进行前端快速开发的脚手架(框架),注意必须在全局中进行安装):

1、安装 vue3 的脚手架:npm install @vue/cli -g

vue2 的脚手架为:npm install vue-cli -g

2、检查是否安装成功:vue -V

安装到这里,可以查看一下全局安装了哪些东西:npm list -global
在这里插入图片描述

2、vue ui创建vue项目

安装脚手架后,可以在终端中启动 vue 可视化界面,并在里面创建 vue 项目。

2.1 自定义创建路径

进来之后,就可以创建了,vue-cli 创建项目时如何自定义路径,有两种方式:

① cmd 先输入盘符,切换到相应的磁盘,然后输入命令:cd 目标文件夹路径,回车即可。
再输入命令:vue ui,回车即可完成项目路径的自定义。

② 直接输入 vue ui 进入后修改,修改后一定记得回车,否则将不会生效

2.2 界面创建步骤

1、输入项目初始信息

2、预设

3、功能

在这里插入图片描述

4、最后一步

在这里插入图片描述

创建后将功能和配置保存为一套新的预设,预设将会被保存到 C:\Users\编号\.vuerc中。等待项目创建完成(首次创建较慢),完成后会出现提示窗口。

2.4 创建过程中可能会遇到的问题

报错: 创建过程中报错: Error: command failed: npm install --loglevel error --legacy-peer-deps

解决:

方式一(推荐):修改上面配置目录的两个文件的权限(node_global、node_cache):

方式二:cmd 以管理员身份打开,输出 vue ui 进入,然后再创建。(注意:这样不能在界面中自定义路径,只能在cmd窗口中进入目标路径后再 vue ui)

3、vue项目目录结构

node_modules  所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。public 静态目录,存放项目公共资源。如网站LOGOsrc   存放 vue 项目的源代码api   专门存放异步请求assets  资源文件,存放 css,图片等资源components 全局组件layoutstorerouter  用来配置路由,定义各个页面对应的URLviews   页面的放置位置App.vue  是项目的主组件页面,所有页面都是在该组件下进行切换的。main.ts或者为main.js......
...
package.json  存放项目的依赖配置
...

router 路由:页面需要跳转,就在这设置

在这里插入图片描述

至此,本教程结束。后续讲解如何给上面创建的工程添加一些依赖、插件!!!

相关文章:

  • Linux学习教程(第十五章 Linux系统日志管理)
  • [wp]“古剑山”第一届全国大学生网络攻防大赛 Web部分wp
  • 基于Java酒店管理系统
  • 低代码开发:激发创新还是程序员的末日?
  • 问题:数组对象去重
  • 【Java数据结构 -- List和ArrayList与顺序表】
  • android项目实战之使用框架 集成多图片、视频的上传
  • 2024年软考科目怎么选?(选科指引)
  • vscode如何在没有网络的情况下安装插件
  • 微信小程序 - 创建 ZIP 压缩包
  • json转yolo格式
  • RabbitMQ 消息中间件 消息队列
  • flask之文件上传
  • 双目光波导AR眼镜_AR智能眼镜主板PCB定制开发
  • P5743 【深基7.习8】猴子吃桃
  • css系列之关于字体的事
  • Idea+maven+scala构建包并在spark on yarn 运行
  • Vim 折腾记
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 诡异!React stopPropagation失灵
  • 来,膜拜下android roadmap,强大的执行力
  • 小程序测试方案初探
  • 在Mac OS X上安装 Ruby运行环境
  • 最近的计划
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​低代码平台的核心价值与优势
  • ​第20课 在Android Native开发中加入新的C++类
  • ​用户画像从0到100的构建思路
  • #在 README.md 中生成项目目录结构
  • (4)(4.6) Triducer
  • (C语言)输入一个序列,判断是否为奇偶交叉数
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)ssm学生管理系统 毕业设计 141543
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (十)T检验-第一部分
  • (转)淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • .bat批处理(三):变量声明、设置、拼接、截取
  • .net 简单实现MD5
  • .NET 中什么样的类是可使用 await 异步等待的?
  • .NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】
  • .Net下的签名与混淆
  • .NET中使用Redis (二)
  • @AliasFor 使用
  • @CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思
  • [20181219]script使用小技巧.txt
  • [Angular 基础] - 指令(directives)
  • [autojs]autojs开关按钮的简单使用
  • [AutoSar]BSW_OS 02 Autosar OS_STACK
  • [BZOJ5250][九省联考2018]秘密袭击(DP)
  • [C# 开发技巧]实现属于自己的截图工具
  • [C++进阶篇]STL中vector的使用