当前位置: 首页 > 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】猴子吃桃
  • Asm.js的简单介绍
  • Mysql数据库的条件查询语句
  • node-glob通配符
  • python3 使用 asyncio 代替线程
  • 对象引论
  • 理解在java “”i=i++;”所发生的事情
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 深入 Nginx 之配置篇
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 走向全栈之MongoDB的使用
  • NLPIR智能语义技术让大数据挖掘更简单
  • raise 与 raise ... from 的区别
  • 昨天1024程序员节,我故意写了个死循环~
  • ​虚拟化系列介绍(十)
  • #100天计划# 2013年9月29日
  • #控制台大学课堂点名问题_课堂随机点名
  • (003)SlickEdit Unity的补全
  • (02)Hive SQL编译成MapReduce任务的过程
  • (1)(1.9) MSP (version 4.2)
  • (14)Hive调优——合并小文件
  • (C语言)字符分类函数
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (小白学Java)Java简介和基本配置
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • (转)使用VMware vSphere标准交换机设置网络连接
  • (转载)利用webkit抓取动态网页和链接
  • .FileZilla的使用和主动模式被动模式介绍
  • .NET 使用 XPath 来读写 XML 文件
  • .pings勒索病毒的威胁:如何应对.pings勒索病毒的突袭?
  • [10] CUDA程序性能的提升 与 流
  • [8481302]博弈论 斯坦福game theory stanford week 1
  • [Android Pro] listView和GridView的item设置的高度和宽度不起作用
  • [Android学习笔记]ScrollView的使用
  • [BZOJ 2142]礼物(扩展Lucas定理)
  • [BZOJ3223]文艺平衡树
  • [C#] 我的log4net使用手册
  • [C/C++随笔] char与unsigned char区别
  • [C++从入门到精通] 14.虚函数、纯虚函数和虚析构(virtual)
  • [ChromeApp]指南!让你的谷歌浏览器好用十倍!