Vue-cli（2.X）的简单入门（创建项目、 Vue工程改造、Vue组件）

最新推荐文章于 2024-05-21 18:31:57 发布
最新推荐文章于 2024-05-21 18:31:57 发布
阅读量527 收藏 1
点赞数
分类专栏： 前端框架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dean_xiu/article/details/111350457
版权

文章目录

Vue CLI简单概述

  • Vue CLI是一个基于Vue.js进行快速开发的完整系统
  • Vue CLI致力于将Vue生态中的工具基础标准化（如Webpack），它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样编程人员可以专注在撰写应用上，而不必花时间在处理配置上
  • 同时，Vue CLI也为每个工具提供了调整配置的灵活性，无需eject

Vue-CLI的安装

执行以下命令进行安装

npm install -g @vue/cli

命令成功执行结束后显示如下：

在这里插入图片描述
使用以下命令进行查看Vue-Cli的版本

vue --version

在这里插入图片描述

VueCLI创建项目

2.X版本创建项目

  • 执行以下命令
# 分别执行
npm install -g @vue/cli-init
# 注意 项目名称不能是大写
vue init webpack vue-entry

在这里插入图片描述
在这里插入图片描述
成功创建后显示如下：
在这里插入图片描述

  • 进入工程，进行启动
    实际上就是执行上述显示的两条命令
# 进入到工程目录下
cd vue-entry
# 进行启动
npm run dev

执行后显示如下

在这里插入图片描述
我们进入给的链接,显示页面如下：
在这里插入图片描述

  • 对项目进行编译，然后使用WebStorm打开
    在这里插入图片描述
    使用WebStorm打开项目后，打包后的页面被放在dist文件夹下
    在这里插入图片描述
    如果发现使用浏览器打开index.html文件后，页面空空如也，可能是路径的问题，将文件内容更改为相对路径即可
    在这里插入图片描述
    用浏览器打开后页面显示如下：
    在这里插入图片描述

3.x创建项目

  • 3.x可以进行自定义选择vue cli版本创建项目
    创建项目命令如下：
# vue-three是项目名称
vue create vue-three

执行后会出现如下界面
在这里插入图片描述
选择了自定义后会出现如下界面
在这里插入图片描述
选择2.x版本后，出现如下界面，依次进行选择
在这里插入图片描述
选择完毕后就开始了欢快的创建工程过程，完成后会出现以下内容
在这里插入图片描述

  • 根据上述命令进行启动项目
cd vue-three
# 启动命令与2.x版本稍有差异
npm run serve

启动完成后可以根据给的地址进行访问
在这里插入图片描述

  • 访问
    在这里插入图片描述
  • 对比一下2.x创建项目所生成的项目文件结构和3.x创建项目所生成的项目文件结构

3.x项目文件结构
在这里插入图片描述
2.x项目文件结构
在这里插入图片描述
肉眼可见的3.x比2.x少了很多东西

Vue CLI工程和普通工程

不使用Vue脚手架时创建的普通工程

  • 创建一个html文件
  • 引用vue.js
  • 编写Vue组件
    在这里插入图片描述

Vue CLI工程

Vue 的普通工程里，我们是将组件和页面都写在一个文件内
但有了Vue CLI后，Vue脚手架帮助我们将组件整合成为了一个.vue文件

Vue工程改造

我们在上面使用vue命令创建了一个vue工程
在之后我们需要创建自己的vue工程时，可以复制整个工程 文件夹，然后进行一些更改作为我们自己的项目，而不必再一次使用命令进行繁琐的操作
在这里插入图片描述
复制后使用WebStorm（或其他用的顺手的开发工具）打开，然后对其中的一些文件进行修改
在这里插入图片描述
修改后的App.vue如下所示，启动工程后
在这里插入图片描述
访问localhost:8080
在这里插入图片描述

使用Vue脚手架的工程
  • 主要的点就是在组件部分，Vue将组件整合为了一个.vue文件，当某处需要这个组件时，进行引用即可
  • .vue文件包含了三个部分：template、script、style
    在这里插入图片描述
  • Vue普通工程与脚手架工程的对比
    在这里插入图片描述

Vue组件

普通工程中注册Vue组件（局部 & 全局）

  • 全局注册
    js里进行全局注册
    在这里插入图片描述
    Vue实例进行绑定使用，全局注册组件有两种方式进行使用
    在这里插入图片描述

方式1： div中使用<web-component>
在这里插入图片描述
方式1结果如下：
在这里插入图片描述
方式2：直接在Vue实例中使用
在这里插入图片描述
方式2结果演示
在这里插入图片描述

  • 局部注册
    局部注册是以对象的方式进行注册的
    在这里插入图片描述
    在使用的时候略与全局注册有一一点点差别，需要在Vue实例中进行声明
    在这里插入图片描述
    局部组件结果演示
    在这里插入图片描述

Vue-CLI工程注册组件

组件（手动渲染）

  • 创建组件
    组件目录
    在这里插入图片描述

Login组件
在这里插入图片描述
Home组件
在这里插入图片描述

  • App.vue组件中使用Home和Login组件
    在这里插入图片描述
    ！这里说明一下手动渲染：我们虽然引用并且注册了两个组件，但是具体在<div>中使用哪一个是需要手动去写的，使用Login组件就在<div>中使用<login>,使用home就在<div>中使用<home>,非常不方便，在后面的Vue路由将会解决这一问题。
    启动工程，查看效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
Dean_xiu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli2.x项目优化之引入本地静态库文件的方法
08-27
vue-cli2.x项目优化之引入本地静态库文件的方法 本文主要介绍了 Vue-cli 2.x 项目优化方法之一，即引入本地静态库文件的方法。该方法可以有效地优化项目的编译速度和文件大小。 首先，需要将 node_modules 下相应...
[Vue]Vue2.x创建项目全程讲解，保姆级教程，手把手教，Vue2怎么创建项目（上）
热门推荐
qq_51055690的博客
05-12 1万+
vue教程入门，vue 安装vue脚手架，安装vue-cli 使用vue脚手架 创建一个vue脚手架项目 创建一个vue2的项目 安装vue vue创建项目过程
Vue2.x——基础教程
qqxhb 资源共享
05-20 819
简介 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。Vue.js 自身不是一个全能...
【vue-cli搭建vue项目的过程2.x】
最新发布
qq_23128255的博客
05-21 366
搭建vue项目、eslint代码规范
vue2结合脚手架三搭建项目结构
前端小白在前进的博客
09-26 136
vue2.x结合vue-cli3项目结构搭建 项目中关于路由的灵活使用 import Vue from 'vue' import VueRouter from 'vue-router' import Home from "@/views/Home" const exam = () => import('../views/exam') const group = () => import('../views/group') const interview = () => imp..
Vue2.X Vue-CLI简介
cc常 的博客
03-18 246
Vue2.x Vue-CLI简介 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 什么是Vue-CLI(Command Line Interface)? Vue-CLI是vue官方提供的脚手架工具, 默认已经帮我们搭建好了一套利用webpack管理vue的项目结构 如何安装Vue-cli和使用Vue-CLI? 安装脚手架工具: npm
Vue-CLI 4.x 自动部署项目至服务器
04-01
使用 scp2+cross-env 自动化上传部署 scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。...这里我们就用这个功能，在Vue编译构建成功之后，将项目推送至测试/生产环境，以方便测试，提高效率。
vue-cli4.x创建企业级项目的方法步骤
10-15
本篇文章将详细介绍如何使用 Vue CLI 4.x 创建一个企业级项目，并涵盖关键步骤和配置。 首先，确保你已经安装了 Node.js，因为 Vue CLI 是基于 Node.js 的。然后，你需要全局安装 Vue CLI： ```bash $ npm install...
vue-cli3.X快速创建项目的方法步骤
10-15
主要介绍了vue-cli3.X快速创建项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
10-14
安装后，你依然可以使用 `vue init` 命令来创建基于 Vue CLI 2.x 的项目。 **Vue Router 的导航守卫** 在 Vue 应用中，`vue-router` 提供了导航守卫功能，允许我们在路由变化时进行控制。`router.beforeEach` 是一...
搭建vue2项目的基本步骤
木方佳学的博客
06-09 1042
为你的项目名称，你需要根据实际情况进行替换。在执行该命令后，Vue CLI 会自动下载所需的依赖并创建一个基础的 Vue.js 项目结构。Vue.js 提供了一种快速创建项目的工具——Vue CLI，我们可以通过它来创建基础的 Vue.js 项目结构和构建工具配置。以上就是 Vue.js 2.x 项目的基本搭建步骤。如果你还需要添加一些插件或者根据实际情况进行一些配置，则可以进一步修改。安装完 Vue CLI 后，我们可以使用它来创建一个 Vue.js 项目。安装 Vue CLI。
使用 Vue CLI 创建 Vue 2.x 项目
weixin_42591485的博客
03-20 7776
【图文教程】在 Win 10 下，使用 Vue CLI 5.0 创建 Vue 2.0 项目
Vue CLI 2.x搭建vue(目录最全分析)
m0_52775179的博客
08-11 215
ps：require/export是一种nodeJs(commonJs规范)的依赖注入的方法，import/export是ES6语法，用于引入模块，在nodeJs中使用的ES6语法最终会使用babel工具（babel-loader）转化为ES5。：浏览器解析的兼容配置，该文件主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为：语法转义器、补丁转义器、sx和flow插件。： autoprefixer（自动补全css样式的浏览器前缀）；
vue cli 2X使用教程
qq_44649893的博客
07-11 336
一.环境 :NodeJs(npm) Mac 无特殊操作 next->next->…->install->finished windows 起步安装与Mac无异终端 / cmd node -v ->14.16.2 说明安装成功 npm -v -> 14.16.2 说明安装成功 windows 需要修改下载及缓存路径,并且配置环境变量 修改下载及缓存路径 在nodejs 安装目录下新建目录 node-global 和 node_cache 执行命令 : ???? np
vue学习---基于vue2项目搭建详述
茹嗨瑞的博客
10-30 1716
此篇是基于vue2.x的开发环境。vue2项目创建的详细教程。
vue2.x搭建项目
2201_75943567的博客
07-03 210
4, vue3.x/4.x/5.x项目框架 vue create project-name 初始化 npm run serve 启动。src文件夹，是存储项目源代码的文件夹（类似express项目中的bin），所有前端的代码文件都存储在src中。static文件夹，是存储静态资源文件的静态文件夹(类似于express项目中的public)在vue项目根目录下，index.html就是项目的首页，其他文件是项目的各种配置文件。2,创建项目文件夹,并在这个文件夹下打开命令行。
Vue开发之vue-cli2.x环境搭建
Thinkingcao的专栏
10-10 713
学习Vue是否需要学会Node.js? 学习Vue不需要学会Node，Vue是前端框架，nodejs是服务端，不需要学会Node.也不需要会Node，我们如果要使用Vue的脚手架的话，只需要学习Node所引声出来的npm指令即可； 一、前言 近几年，前后端分离趋势越来越明显了，继而出现了很多前端新框架，当下Vue比较火热，在前后端分离项目中使用众多，Vue即可在H5端使用，也可搭建...
VueCli2.x版本搭建
gongzuoyongde的博客
04-09 206
1.安装 npm install -g @vue/cli npm install -g @vue/cli-init 第一个指令目前安装的都是3.x版本以上，通过第二个指令@vue/cli-init可将2.x的版本模版也安装上，那么两这版本的就都可以使用了 2.初识化项目 vue init webpack 项目文件名称 3. 初始化中需要填写或选择如下： project name 输入项目名称：一般情况下跟项目文件名称一样，直接回车不填写的化，默认使用项目文件名称。注意项目名称不可以存在大写英文字母和汉字
vue-cli3.x中创建项目的命令
04-04
运行以下命令即可创建一个新的Vue项目： ``` vue create my-project ``` 其中，my-project是你想要创建的项目名称。运行此命令后，Vue CLI会提示你选择一些配置选项，例如预设、插件等。你可以根据自己的需要进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值