【vue2】Vue Cli脚手架与VueTools的安装详解

简介: Vue Cli脚手架与VueTools的安装详解

一、vue-cli脚手架工具的安装及文件介绍

1.vue-cli工具安装

默认情况下,浏览器只能识别html,css,js后缀文件,无法识别 .vue后缀文件,所以要想让浏览器识别.vue后缀文件,我们需要借助一些插件来帮我们将.vue文件转成浏览器可以识别的html文件,故此我们需要下载该工具

(兄弟姐妹们需要先下载node与git,node专栏:node_初映CY的前说的博客-CSDN博客)

①win+r输入cmd命令打开我们的终端小黑窗口后输入(需要等待5分钟左右)

npm install -g @vue/cli;

f183bf14539848cbb379455c2b702361.png

②创建脚手架(开始用插件来搭建框架)

vue-cli生成脚手架官网文档传送门:创建一个项目 | Vue CLI

2.1 创建vue项目 :vue create 项目名称(在哪里打开黑窗,就在哪里创建项目 )

82fd93e9765946979e215684c38ed53a.gif

7eca57bb375b44a5928f7ba889edcb29.png

③选择配置(vue2)

67b3348cd2804628913fde01d975ebf6.png

④项目搭建完成出现的提示

2661b369a1714a8b97df70ae12c2e8a4.png

⑤查看我们搭建的项目框架:

e3c25273fb8e4b4686eebecff36d83a3.png

⑥vue框架初体验

先拖进我们的vscode,打开终端我们来体验下我们vue框架

1.输入npm run serve,切记是在我们的根目录下

(终端开启之后不要关闭,此时我们修改代码无需重新运行,浏览器会自动刷新)

cf41d41f467d482781d45a46d52b025f.png

运行后可以看到:

411d189351b84857b3e55006e21b13eb.png

按住ctrl点击任意一个可访问我们项目的hellovue首页

(恭喜你的第一个vue项目框架搭建完成~~~)

3f9dc9835bb649c0af87a79c437b7686.png

⑦cli脚手架准备工作:清理欢迎界面与自定义配置

1.在vue.config.js文件中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
      // 关闭eslint代码检查,eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格
      lintOnSave: false
})

2.删除conponents文件夹下的默认介绍组件

f31cfbb74a6a4714a4f7fba84dd72222.png

3.打开我们的APP.vue,输入 < 点第一个提示,开始做我们自己的组件

cb4873fa5dc14429ae93e325b7746676.png

总结cli脚手架工具作用:

  • 生成规范的vue项目目录
  • 底层基于webpack, 将后缀名为 .vue 的文件 编译成浏览器可以识别的 html文件

看到了这里,兄弟姐妹可以感受到cli脚手架作用是帮我们生成了一大堆的文件查,至于这些文件是啥呢?下面博主带大家看看这些文件的作用是什么。

2.vue cli各文件|文件夹的介绍

studyvue         # 项目目录

   ├── node_modules # 项目依赖的第三方包

   ├── public       # 静态文件目录

     ├── favicon.ico# 浏览器小图标

     └── index.html # 单页面的html文件(网站首页,vue会帮我们配置好,使用较少)

   ├── src          # 业务文件夹(项目核心文件夹,我们写的项目代码都放在这个文件夹里面)

     ├── assets     # 静态资源(一般项目图片、css都放在这里)

       └── logo.png # vue的logo图片(没啥用,vue打广告的,可删除)

     ├── components # 组件目录一般我们写的组件都放在这里)

       └── HelloWorld.vue # 欢迎页面vue代码文件 (打广告的,可删除)

     ├── App.vue    # 整个应用的根组件(网站首页index.htm默认会渲染这个根组件)

     └── main.js    # 入口js文件(入口文件,vue实例的创建,根组件的挂载都是在这里完成)

   ├── .gitignore   # git提交忽略配置(默认已经帮我们配置好 )

   ├── babel.config.js  # babel配置(ES6转换ES5工具,一般不用管)

   ├── package.json # 依赖包列表

   ├── README.md    # 项目说明(一般公司代码规范,人员组成之类的可以写在这里)

   └── package-lock.json    # 项目包版本锁定和缓存地址

   └── vue.config.js    # 项目webpack配置项

以上就是我们整个vue cli脚本架的安装与文件的介绍,博主标红的部分是我们经常打交道的文件|文件夹。

二、VueTools的安装详解

1.工具介绍:

这个浏览器插件可以让我们看到我们vue框架中各组件的结构 ,编辑后页面也会实时改变

拿我们下一篇会讲解的例子举例我们可以看到我们的信息

388adf8083b540b1937c226b099bdaaa.png

2.VueTools安装:

浏览器搜索安装即可,记得在浏览器中开启:开发者模式

6c8a1cc6565e44dea99696d45d0ca8c8.gif



相关文章
|
6月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1509 0
|
7月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
448 2
|
7月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
511 4
|
11月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
463 60
|
7月前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
820 1
|
11月前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
188 17
|
11月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
274 17
|
11月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!

热门文章

最新文章