创建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 路由:页面需要跳转,就在这设置

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/257065.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UI自动化测试工具的定义及重要性

UI自动化测试工具在现代软件开发中起着不可或缺的作用。它们能够提高测试效率、减少人为错误、提供全面的测试覆盖,并支持持续集成。通过有效使用UI自动化测试工具,开发团队可以提高软件质量,提供更可靠的应用程序,满足用户的需求…

Java网络编程,使用UDP实现TCP(一), 基本实现三次握手

简介: 首先我们需要知道TCP传输和UDP传输的区别,UDP相当于只管发送不管对方是否接收到了,而TCP相当于打电话,需要进行3次握手,4次挥手,所以我们就需要在应用层上做一些功能添加,如:…

408——知识点大杂烩

在完成专业课的一轮复习以及历年真题的学习后,发现选择题甚至个别大题的考点就单纯考对概念的理解,会就是会,不会想到脑壳疼都做不出来,而408的知识点主打一个多杂,所以过来整理一下笔记。本文的知识点主要是在我做题过…

2002-2021年全国各地级市环境规制18个相关指标数据

2002-2021年全国各地级市环境规制18个相关指标数据 1、时间:2002-2021年 2、来源:城市年鉴 3、指标:行政区划代码、地区、年份、工业二氧化硫排放量(吨)、工业烟粉尘排放量(吨)、工业废水排放量(万吨)、工业废水排放达标量(万吨)、工业二氧…

dell服务器安装PERCCLI

因在linux 系统中无法查看系统磁盘的raid级别,也无法得知raid状态,需要安装额外的包来监控,因是dell服务器,就在dell网站中下载并安装 1、下载链接:驱动程序和下载 | Dell 中国https://www.dell.com/support/home/zh-…

互联网Java工程师面试题·RabbitMQ篇

目录 1、什么是 rabbitmq 2、为什么要使用 rabbitmq 3、使用 rabbitmq 的场景 4、如何确保消息正确地发送至 RabbitMQ? 如何确保消息接收方消费了消息? 5、如何避免消息重复投递或重复消费? 6、消息基于什么传输? 7、消息如…

设计模式基础——概述(1/2)

目录 一、设计模式的定义 二、设计模式的三大类别 三、设计模式的原则 四、主要设计模式目录 4.1 创建型模式(Creational Patterns) 4.2 结构型模式(Structural Patterns) 4.3 行为型模式(Behavioral Patterns&…

Java---线程讲解(二)

文章目录 1. Runnable接口2. 卖票案例3. 同步代码块解决数据安全问题4. 同步方法解决数据安全问题5. 线程安全的类6. Lock锁 1. Runnable接口 1. 创建线程的另一种方法是声明一个实现Runnable接口的类,之后重写run()方法,然后可以分配类的实例&#xff0…

利用eclipse导入外部java工程

利用eclipse导入外部java工程,打开eclipse,依次点击File-Import,…按下图依次执行…

Facebook引流脚本的优势与编写教程!

在当今的数字化时代,社交媒体已经成为企业进行营销和推广的重要渠道之一,Facebook作为全球最大的社交媒体平台之一,拥有数十亿的用户,为企业提供了无限的引流可能性。 然而,对于企业来说,在Facebook上吸引…

uni-app 微信小程序之好看的ui登录页面(四)

文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面(一) uni-app 微信小程序之好看的ui登录页面(二) uni-app 微信小程序之好看的ui登录页面(三) uni-app 微信小程…

AttributeError: module ‘importlib_resources‘ has no attribute ‘path‘ 解决方案

问题描述 with importlib_resources.path("xx", fname) as p: AttributeError: module importlib_resources has no attribute path 博主使用的是python3.9,看importlib_resources在importlib-resources PyPI中的介绍,开始猜测问题出在pyth…