Vue--》超详细教程——vue-cli脚手架的搭建与使用

news2025/7/11 9:32:23

目录

vue-cli

vue-cli 的安装 (可能出现的问题及其解决方法)

vue-cli 创建 Vue 项目

Vue项目中目录的构成

Vue项目的运行流程

Vue组件的使用


vue-cli

vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack,从而目标只需专注在撰写项目应用上。其官网如下:vue-cli官网 ,基于vue-cli这个系统,我们就可以快速搭建好“单页面应用程序” :

单页面应用程序(英文名:Single Page Application)简称SPA,顾名思义指的是一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。

vue-cli 的安装 (可能出现的问题及其解决方法)

vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上,执行以下安装(默认安装在c盘),默认下载最新版本:

npm install -g @vue/cli

安装失败的可能原因

1)可能因为网络问题,多试几次。

2)可能你之前安装过旧版本,先执行如下命令删掉旧版本

卸载命令:npm uninstall vue-cli -g  或  yarn global remove vue-cli

3)可能是权限问题,试试用管理员权限执行安装命令

4)可能是环境变量问题,你的npm和node安装的路径不一致导致报错

针对问题(一),给出以下解决问题:

因为npm安装默认安装的是借助国外的站点,所以访问有点慢,我们可以使用以下方法解决:

配置淘宝镜像源(使用国内站点):这种方法不建议使用,因为使用这种方式会造成之后都要通过淘宝镜像来获取依赖包,如果是公司内部发布到npm的依赖包,会出现下载失败的情况。

npm config set registry https://registry.npm.taobao.org

查看自己是否配置成功:

npm config get registry

安装 cnpm:推荐这种方式是因为既不会影响npm命令,又不用每次都写淘宝地址进行依赖包的安装,向全局安装了cnpm这个工具。

npm install -g cnpm --registry=https://registry.npm.taobao.org

优点:想用npm就用npm,想用cnpm就用cnpm

缺点:使用 npm 和 cnpm 来安装包时有区别的。通常我们前端项目中都会有 package-lock.json 文件,这两个命令对其有一定的影响。

解决办法:开发过程中完全使用npm,最简单的办法;使用cnpm后项目传给他人时要明确告知对方使用cnpm来拉取依赖,避免各种错误。

针对问题(四),给出以下解决问题:

因为npm和node的安装路径不一致,所以将两者的路径设置一致,因为的node安装在D盘,所以我将npm的路径设置与node的路径一致。

配置node的环境变量

如果安装node没有配置过环境的话,先进行node的环境配置:

查看自己的node安装路径:

将node的安装路径添加到path环境变量中:

添加新的系统变量NODE_PATH,变量值为:node文件夹下的node_modules文件夹路径:

设置npm默认安装路径

设置安装路径命令如下

npm config set prefix "D:\programming\nodejs"

设置缓存路径命令如下

npm config set cache "D:\programming\nodejs\node_cache"

缓存路径的文件夹可以自己定义,如果出现:npm WARN logfile could not be created: Error: EPERM: operation not permitted 这条报错信息是因为你创建的缓存路径是没有管理员权限的,需要进行如下操作:

右键你的安装的node文件点击属性,再次点击安全,选择用户,点击下面的权限,点击应用,设置完后自定义的缓存文件就有权限了,在执行设置缓存路径即可。

当你解决所以问题之后再次执行安装 vue-cli 命令后即可:

当安装完成之后,我们执行这个命令 vue -V 如果出现如下vue/cli版本号,则提醒我们安装成功。

vue-cli 创建 Vue 项目

在终端运行如下命令,创建指定名称的项目:

vue create 项目名称

终端出现一些选项让程序员选择来进行创建,视图如下:用键盘的 上 下  箭头来进行选择回车来进行确定

三个选择的区别:顾名思义前两个是帮助程序员自动创建 Vue2 和 Vue3 的项目;第三个选项则是让程序员来进行手动安装哪些功能到Vue项目中,主动权完全交给程序员。建议日常开发中选择第三种选项,这种可定制性很高。

选择第三个选项敲回车会自动出现如下面板选项,继续让程序员进行选择:(空格来进行选择) 根据需求选择下面的内容,新手不推荐 Linter/Formatter 这种严格的规范化标准会整的你怀疑人生。

回车之后进入以下界面,让你选择Vue的版本来进行创建项目:

选择版本回车之后,进入以下界面,选择你学过的进行选择:

回车之后出现以下界面,询问你Babel、ESLint等第三方插件的配置文件是否需要放在独立的配置文件中?这里默认选择第一个,放在独立的配置文件里,便于后期的管理。

回车之后出现以下界面,询问你是否要将之前的配置进行一个预设,方便下次创建项目时直接按照预设的创建而不用再进行一次手动创建了:

选择 y 之后,询问你这个预设的名字,自己自定义一个即可,下次看到这个名字直接使用就可。

回车之后出现以下界面,提示你项目已经创建完成,运行项目的命令给出 npm run serve :

我们 cd project_begin 到项目根目录,然后执行 npm run serve 运行项目:复制 Local 地址到浏览器当中 (注意,当前这个终端窗口是不能关闭的其帮我们监听代码的变化,关闭,项目也就关闭了)

至此,Vue项目创建完成。

Vue项目中目录的构成

Vue项目中src目录的构成:

assets文件夹:存放项目中用到的静态资源文件,例如:css样式表、图片资源。

components文件夹:程序员封装的、可复用的组件,都要放到components目录下。

App.vue:是项目的根组件。

main.js:是项目的入口文件。整个项目的运行,要先执行 main.js 。

Vue项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.jsApp.vue 渲染到 index.html 的指定区域中。

在main.js文件中:

// 导入 vue 这个包,得到 Vue 构造函数
import Vue from 'vue'
// 导入 App.vue 根组件,将来要把 App.vue 中的模板结构渲染到 HTML 页面上
import App from './App.vue'

Vue.config.productionTip = false

// 创建 Vue 的实例对象
new Vue({
  //el:'#app', Vue实例的$mount()方法,作用和el属性完全一样!
  // 把render函数指定的组件,渲染到 HTML 页面中。
  render: h => h(App),
}).$mount('#app')

在App.vue文件中:

<template>
  <div>
    <p>aa</p>
    <p>bb</p>
    <p>cc</p>
  </div>
</template>

在index.html中:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在页面上:

总结:

App.vue用来编写待渲染的模板结构

index.html中需要预留一个el区域

main.js把App.vue渲染到了index.html所预留的区域中

Vue组件的使用

在Vue中可以自己自定义组件,并将组件渲染到页面上,如下:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nacos——配置中心源码详解

Nacos——配置中心源码详解配置中心客户端主动获取客户端服务端客户端长轮询更新客户端1.入口2.配置文件分片处理3.配置文件处理4.本地配置文件与缓存数据的对比5.开启长轮询与服务端对比6.通知监听器7.监听回调处理服务端1.入口2.长轮询机制3.长轮询的延迟任务4.数据变更事件总…

【U8+】用友U8同一个账套使用了好多年,需要将以前年度进行分离、删除。

【问题需求】 用友U8一个账套使用了好多年了&#xff0c; 需要将以前年度进行删除&#xff0c; 但是在系统管理中&#xff0c;查看该账套只有一个年度账&#xff08;账套库&#xff09;。 例如&#xff1a; 图中002账套&#xff0c;是从2020年开始使用至2024年&#xff0c; 现在…

SpringBoot集成Spring Security——【认证流程】

一、认证流程 上图是 Spring Security 认证流程的一部分&#xff0c;下面的讲解以上图为依据。 &#xff08;1&#xff09; 用户发起表单登录请求后&#xff0c;首先进入 UsernamePasswordAuthenticationFilter&#xff1a; 在 UsernamePasswordAuthenticationFilter中根据用户…

第十四届蓝桥杯模拟赛第一期试题【Java解析】

目录 A 二进制位数 问题描述 答案提交 参考答案 解析 B 晨跑 问题描述 答案提交 参考答案 解析 C 调和级数 问题描述 答案提交 参考答案 解析 D 山谷 问题描述 答案提交 参考答案 解析 E 最小矩阵 问题描述 答案提交 答案 解析 F 核酸日期 问题描述…

香港和新加坡,谁是亚洲加密金融中心?

去新加坡&#xff0c;还是去中国香港? 对中国Web3的创业者来说&#xff0c;是一个问题。 2022年11月&#xff0c;中国香港金融科技周和新加坡金融科技周同时举办&#xff0c;将这场竞赛推向高潮。 抢人、抢钱、抢公司……中国香港和新加坡对于“加密金融中心”或者“全球We…

2、云原生微服务实践-服务开发框架设计和实践

目录 一、依赖管理 二、服务模块管理 api、svc 三、其他文件管理 1、私密配置文件 2、前端页面单页文件 四、单体仓库 mono-repo 1、单体仓库和多仓库的对比&#xff1a; 2、单体仓库优点 五、接口参数校验 六、统一异常处理 七、DTO(数据传输对象)和DMO(数据模型对…

尝试改善科研V2

参考链接&#xff1a; https://fulequn.github.io/2022/09/26/Article202209261/ https://www.xljsci.com/ https://apps.ankiweb.net/ https://www.explainpaper.com/ 1 从动机上促成科研 将科研这件事情分成准备工作、活动本身、活动的结果。 1.1 准备工作 准备工作十分简…

湖南郴州王瑞平、大衣哥、谷传民、孟文豪唱响《知心世界》主题曲

在大衣哥和谷传民对簿公堂之时&#xff0c;来自湖南郴州的王瑞平&#xff0c;准备在他们之间架起一座沟通的桥梁。众所周知&#xff0c;大衣哥和谷传民的官司&#xff0c;是因为《火火的情怀》版权&#xff0c;其实这首歌的版权&#xff0c;并不是只属于谷传民一人。 著名音乐人…

第一个springBoot maven 项目

1. env: java 11 IntelliJ IDEA 2021.3.2 (Community Edition) 2. file->new project->Maven: pom.xml 需要导入的包&#xff1a;后面三个是jdk8升级到11后&#xff0c;可能会出错&#xff0c;需要用到的包 <parent><groupId>org.springframework.boot<…

python面向对象之类和对象相关知识

python面向对象之类和对象相关知识 一、面向对象简介 1、什么是面向对象 面向对象是一种编程思想&#xff0c;把数据和对数据的多个操作方法封装在一起组成类&#xff0c;这样通过这个类创建出来的对象,就可以直接调用这些方法了。2、面向对象相关的术语 类&#xff1a;用来…

一次金融APP的解密历程

声明&#xff1a;本文仅限于技术讨论与分享&#xff0c;严禁用于非法途径。若读者因此作出任何危害网络安全行为后果自负&#xff0c;与本号及原作者无关。 前言&#xff1a; 客户仅提供官网下载地址给我们测试。但是由于官网的版本不是最新的&#xff0c;APP会强制你升级。而…

搭建lamp平台

apache安装步骤 检查是否已经rpm安装httpd服务&#xff0c;已安装则卸载服务。 [rootlocalhost ~]# rpm -e rpm -qa | grep httpd --nodeps 开发工具安装 如果编译安装无法执行&#xff0c;可能是开发工具没有安装&#xff0c;执行下面命令即可安装。&#xff08;如已安装则跳…

【springboot进阶】优雅使用 MapStruct 进行类复制

项目中经常会遇到这样的一个情况&#xff1a;从数据库读取到数据&#xff0c;并不是直接返回给前端做展示的&#xff0c;还需要字段的加工&#xff0c;例如记录的时间戳是不需要的、一些敏感数据更是不能等等。传统的做法就是创建一个新的类&#xff0c;然后写一堆的get/set方法…

数据结构【队列】

文章目录&#xff08;一&#xff09;队列定义&#xff08;二&#xff09;队列实现&#xff08;1&#xff09;创建结构体&#xff08;2&#xff09;具体函数实现及解析1.1 初始化队列1.2入队列1.3出队列1.4取队首元素1.5取队尾元素1.6返回队列个数1.7判断是否为空1.8销毁队列&am…

springCloud的 consul的下载与安装

下载地址&#xff1a;Install | Consul | HashiCorp Developer 下载自己需要使用的版本 下载后会有一个exe 文件通过cmd 命令行来执行这个exe 文件consul agent -dev -client0.0.0.0 出现此页面后执行8500 端口 请求地址&#xff1a;http://127.0.0.1:8500/ 出现此页面说明启…

黑苹果入门:必备工具篇

以下给大家汇总的这些软件工具都是我们在安装使用黑苹果过程中可能会用到的&#xff0c;至于使用方法&#xff0c;在这里我就不做过多介绍了。 本次只提供软件下载地址&#xff0c;不提供使用方法&#xff0c;不知道如何使用软件工具的童鞋&#xff0c;可以在百度翻翻相关教程…

第5章 C语言高级的库函数

文章目录文档配套视频讲解链接地址第05章 C库函数5.1 assert.h 断言库5.2 ctype.h 测试和映射字符5.3 math.h 数学库5.4 stdlib.h 标准库1. 字符串转整数、浮点数2. strtod 把字符串中的数字转换成浮点数并返回数字的下一个字符的位置3. strtol 字符串转整数4. strtoul 字符串转…

vue3 antd多级动态菜单(二)后台管理系统(两种方法过滤有无子菜单children)

vue3 antd 多级动态菜单&#xff08;精修版本&#xff09; 两种方法实现对children的筛选相关文章推送&#xff08;供参考&#xff09;场景复现实现效果解决方法hasChildren与noChilren函数过滤v-if v-else判断有无children【推荐】&#x1f525;两种方法公用代码sunmmary下期预…

ESP32 入门笔记06: WIFI时钟 + FreeRTOS+《两只老虎》 (ESP32 for Arduino IDE)

ESP32FreeRTOS Esp32 模块中已经提供了 FreeRTOS&#xff08;实时操作系统&#xff09;固件。 FreeRTOS有助于提高系统性能和管理模块的资源。FreeRTOS允许用户处理多项任务&#xff0c;如测量传感器读数&#xff0c;发出网络请求&#xff0c;控制电机速度等&#xff0c;所有…

靶向肿瘤代谢,助力攻克癌症

肿瘤代谢的简介 肿瘤代谢的起源在于奥托沃伯格 (Otto Warburg) 的假设&#xff0c;他也因发现线粒体呼吸链复合物 IV 而获得 1931 年诺贝尔生理学或医学奖。Warburg 观察到&#xff0c;与正常组织相比&#xff0c;体外癌组织切片使用大量葡萄糖生成乳酸 (即使在有氧的情况下也是…