Vue入门五(Vue-CLI项目搭建|vue项目目录介绍|vue项目开发规范|es6导入导出语法)

文章目录

  • 一、Vue-CLI 项目搭建
    • 介绍
    • node环境搭建
      • 1) 下载与安装
      • 2)测试是否安装成功
    • 安装vue-cli
      • 安装vue脚手架
    • 创建Vue项目
      • 1)使用命令创建项目
      • 2)使用图形化界面创建项目
  • 二、vue项目目录介绍
    • 1.命令行运行vue项目
    • 2.Pycharm中运行项目
    • 3.目录结构
  • 三、vue项目开发规范
  • 四、es6导入导出语法
    • 1)默认导入导出
    • 2)命名导入导出

一、Vue-CLI 项目搭建

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.

前端项目,使用工具(vue-cli)创建vue项目,单页面应用spa,组件化开发把xx.vue,ts,saas,less------编译后在浏览器中执行

vue-cli 创建项目开发–项目开发----编译(纯的html/js/css)—上线–>浏览器只能识别html/js/css

vue-cli工具,使用nodejs写,要运行需要安装node环境----需要下载node解释器

注意:可以在项目添加文件防篡改校验,先把文件生成md5值,以后被下载下来,再生成md5值做比对,结果不一致证明文件被篡改了


CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过vue create快速搭建一个新项目,或者直接通过vue serve构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

vue

vue2.x和vue3.x的区别?

  • vue2.x,使用使用vue-cli :https://cli.vuejs.org/zh/
  • vue3.x使用vue-cli,vite只能创建vue3,效率非常高

Vue-CLT项目搭建,vue相当于脚手架,可以创建vue项目。vue脚手架必须要按照node js解释型语言。

node环境搭建

	1.nodejs是一门后端语言2.JavaScript只能运行在浏览器中,因为浏览器中有他的解释器环境3.基于谷歌浏览器的v8引擎(js解释器),使它能够运行在操作系统上文件操作、网络操作、数据库操作--模块

1) 下载与安装

官网下载相应的解释器版本(window系统64位),一路安装—设置安装的路径,安装完成会有两个可执行问题,类似于python解释器的安装包pipi。官网地址:https://nodejs.org/en。然后一路傻瓜式安装即可

在这里插入图片描述

2)测试是否安装成功

命令端打开node操作测试是否安装成功

	1. node   进入node环境2.npm install 装模块-node---相当于python的python命令-npm----相当于python的pip命令A、node -v 查看 node 版本B、npm -v 查看 npm 版本

在这里插入图片描述
由于npm下载模块是去国外的仓库,下载的时候会很慢,所以我们安装cnpm,它是国内源,这样以后都用cnpm来安装模块

	npm install -g cnpm --registry=https://registry.npm.taobao.org# -g 表示装全局# --registry=https://registry.npm.taobao.org 指定淘宝镜像使用cnpm优点:cnpm淘宝出的工具,下载是去淘宝镜像下载,速度快

在这里插入图片描述

这样安装完node环境后,即可安装vue-cli了


安装vue-cli

安装vue脚手架

	cnpm install -g @vue/cli  # 推荐# ORyarn global add @vue/cli  # 需要下载yarn

在这里插入图片描述

这样cmd控制台就可以输入 vue 命令了,(就和装了django可以使用django-admin创建django项目一样)


创建Vue项目

1)使用命令创建项目

可以自己指定创建一个项目文件来存放以后的项目,就不要在根路径下创建了
在这里插入图片描述

	vue create 项目名称# 如果速度很慢---》ctrl+c停止---》执行npm cache clean --force 清理缓存
  1. 选择创建项目
    在这里插入图片描述
  2. 勾选下图三个选项即可,然后回车保存配置

在这里插入图片描述

  1. 选择vue版本
    在这里插入图片描述
  2. 然后直接以下步骤即可完成创建了
    在这里插入图片描述
    在这里插入图片描述

2)使用图形化界面创建项目

直接在命令行中执行vue ui即可自动跳转到图形化界面

	vue ui

在这里插入图片描述
注意,要是不小心关闭了图形化界面,只需要在cmd中按住Ctrl加鼠标左键点击上图的Ready on那条的链接即可

然后和使用命令创建项目差不多,只是有图形化而已,这里就不再创建一遍了

在这里插入图片描述


二、vue项目目录介绍

我这里就使用Pycharm打开这个vue项目了

1.命令行运行vue项目

	在vue项目所在的路径打开cmd后运行 npm run serve命令即可

在这里插入图片描述

打开后就能看见这样一个页面了,这样我们的vue项目就运行成功了

在这里插入图片描述


2.Pycharm中运行项目

先把创建好的vue项目导入到Pycharm中
在这里插入图片描述

第一次使用Pycharm运行Vue项目需要先配置一下运行项
1.添加npm的配置
在这里插入图片描述

在这里插入图片描述
2.添加下图相应的配置项即可
在这里插入图片描述

这样就可以点击那个路径三角形run运行了,当然配置完毕后也可以在运行框中输入npm run serve运行(注意需要重启一下,否则没用)

在这里插入图片描述

3.目录结构

	'vue 项目目录介绍'first                     项目名-node_modules             非常多第三方模块,以后把项目复制给别人时【上传git要忽略掉】,这个文件夹删掉,很多小文件,项目的依赖,项目要运行,没有它不行  如果没有只需要执行 cnpm install,根据package.json的依赖包,安装好依赖public                    文件夹-favicon.ico          网站小图标-index.html           spa 单页面应用,以后整个vue项目都是用这一个html,但你不用动他src                       文件夹--代码都写在这下面-assets               静态资源,以后前端用的图片,js,css。。都放在这里logo.png          图片-components           以后在这里放组件, xx.vue, 小组件HelloWorld.vue    提供的展示组件-router               安装了Router,就会有这个文件夹,下面有个index.jsindex.js		  vue-router配置-store                安装了Vuex,就会有这个文件夹,下面有个index.jsindex.js		  vuex配置-views                一堆组件,页面组件AboutView.vue	  关于页面组件HomeView.vue	  主页页面组件-App.vue              根组件,new Vue实例管理了 div,以后原来写在div中的东西,现在都写在App.vue-main.js              项目的启动入口gitignore                 git的忽略文件,后面学了git就会了babel.config.js           bable配置文件,不用动jsconfig.json             配置文件,不用动package.json              不用动,安装了第三方模块,它自动增加,当前项目所有依赖package-lock.json         锁定文件,忽略掉,这个文件锁定所有版本README.md                 用户手册vue.config.js             vue项目的配置文件

在这里插入图片描述


三、vue项目开发规范

	我们在Vue中写组件都是单页面组件 一个组件是一个xx.vue 页面组件和小组件一个组件内部都有三个部分template标签			Html内容都写在里面script标签			Js内容都写在里面style标签			Css样式内容都写在里面main.js是整个项目的入口new Vue({ router, store, render: h => h(App) }).$mount('#app')1.把App.vue根组件导入2.把App.vue组件中得数据和模板 插入到了index.html的id为app  div中了3.在组件template中写模版 插值语法 指令4.在组件export default {}中写Js5.在组件style中写css样式

四、es6导入导出语法

1)默认导入导出

只能导出一个,一般导出一个对象

	'导出语法'export default {} 一般是个对象'导入语法'import 别名  from '路径'  # 别名就是导出的对象

2)命名导入导出

支持导出多个

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

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

相关文章

Java基础项目---飞机大战的简易实现

推荐阅读 智能化校园:深入探讨云端管理系统设计与实现(一) 智能化校园:深入探讨云端管理系统设计与实现(二) 文章目录 推荐阅读前言一、系统分析问题描述总体设计功能流程图 二、程序和算法的介绍FlyingOb…

Open CASCADE学习|参数化球面的奇异性

参数曲面的奇异性是一个相对复杂的概念,它涉及到参数曲面的几何特性和参数化过程中的一些特殊情况。参数曲面通常用于描述三维空间中的复杂形状,通过参数方程将二维参数域映射到三维空间中。然而,在某些情况下,参数曲面可能会表现…

回顾2023,展望未来

回顾2023 重拾博客 CSDN博客创建和写作,几乎是和我正式开始学习编程开始,至今已经6年。刚上编程课的时候,刚上C语言课的时候,老师说可以通过写技术博客来帮助自己更好学习,于是我就开始自己的技术博客编写之旅。 我…

在微信上秒杀链接怎么做_带给用户微信秒杀新体验

微信秒杀新体验:让每一次点击都成为一次抢购的狂欢! 在这个数字化、信息化的时代,微信已经成为了我们生活中不可或缺的一部分。与此同时,微信营销也成为了众多商家竞相角逐的新战场。如何在众多的营销信息中脱颖而出,吸…

持续构建行业影响力|HarmonyOS SDK荣膺年度“技术卓越”奖项

自2023年9月华为宣布鸿蒙原生应用全面启动以来,HarmonyOS SDK通过将HarmonyOS系统级能力对外开放,支撑开发者高效打造更纯净、更智能、更精致、更易用的鸿蒙原生应用,和开发者共同成长。 通过在开发者社区和HarmonyOS开发者持续的内容共创与技…

Leetcode 494 目标和

题意理解: 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - ,然后串联起所有整数,可以构造一个 表达式 : 例如,nums [2, 1] ,可以在 2 之前添加 ,在 1 之前添…

Curl命令POST请求

curl工具介绍: CURL是一个利用URL语法在命令行下工作的文件传输工具,被广泛应用在Unix、Linux发行版中,并且有DOS和Win32、Win64的移植版本。同时它还支持诸多的通信协议(我们常用的有HTTP、HTTPS、FTP、SMTP、TELNET等&#xff0…

网站ICP备案和公安备案教程

由于最近华为云那边的服务器到期了,而续费的价格比较贵一点,刚好阿里云这边有活动就入手了一台,但是将网站迁移过来后发现又要进行ICP备案,那就备案呗。但是备案完成之后发现还有一个公安备案,真让人头大啊... 很多人也…

vue3dLoader Cannot read properties of null (reading ‘setCrossOrigin‘)“这个报错怎么解决?

默认情况下crossOrigin默认值是“anonymous” 如果出现报错的情况 请设置crossOrigin为空字符串即可。如&#xff1a; <vue3dLoader crossOrigin""> 相关阅读 推荐&#xff1a;vue-3d-loader支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json&#xff0c;并支…

Java基础到高级:锁的全面解析与实践

前言 在项目开发过程中&#xff0c;当需要使用多线程去处理一些业务问题的时候&#xff0c;尤其涉及到多线程读写数据同时发生的操作时&#xff0c;就会产生一些线程安全的问题。那如何理解线程安全问题呢&#xff1f; 线程安全问题是指多线程环境中&#xff0c;由于存在数据…

ubuntu 启用core文件

在~/.bashrc文件末尾增加ulimit -c unlimited然后保存 在当前session下执行source ~/.bashrc命令即时生效 配置core文件格式: sudo sysctl -w kernel.core_patterncore.%p.%s.%c.%d.%P.%E core文件详解 core(5) …

Python入门-面向对象

1.类和对象 是不是很熟悉&#xff1f;和Java一样&#xff0c;在Python中&#xff0c;都可以把万物看成(封装成)对象。它俩都是面向对象编程 1.1 查看对象数据类型 a 10 b 9.8 c helloprint(type(a)) print(type(b)) print(type(c))运行结果&#xff1a; D:\Python_Home\v…

k8s-调度 13

调度器通过 kubernetes 的 watch 机制来发现集群中新创建且尚未被调度到 Node 上的 Pod。调度器会将发现的每一个未调度的 Pod 调度到一个合适的 Node 上来运行。 kube-scheduler 是 Kubernetes 集群的默认调度器&#xff0c;并且是集群控制面的一部分。 如果你真的希望或者有…

C#上位机与欧姆龙PLC的通信11----【爆肝】上位机应用开发(Winform版)

1、先上图 前面10讲&#xff0c;让你爽煹了肝&#xff0c;已经进入最后收尾阶段&#xff0c;这节来个常规应用&#xff0c;让前面的技能直接飞上天&#xff0c;我们要做的界面软件是这样的&#xff0c;虽然没有潘金莲漂亮&#xff0c;但也是爆抱&#xff1a; 2、如何爆&#x…

爬虫到底违法吗?你离违法还有多远?

最近&#xff0c;国家依法查处了部分编写爬虫程序&#xff0c;盗取其他公司数据的不良企业。一时间风声鹤唳&#xff0c;关于爬虫程序是否违法的讨论遍布程序员圈子。那么到底编写爬虫程序是否违法呢&#xff1f; 其爬虫下载数据&#xff0c;一般而言都不违法&#xff0c;因为…

【图的深度优先遍历】

前言 深度优先遍历简称DFS&#xff0c;主要思路是从图中一个未访问的顶点 V 开始&#xff0c;沿着一条路一直走到底&#xff0c;然后从这条路尽头的节点回退到上一个节点&#xff0c;再从另一条路开始走到底&#xff0c;不断递归重复此过程&#xff0c;直到所有的顶点都遍历完…

【机器学习】模型调参工具:Hyperopt 使用指南

机器学习| 模型调参工具&#xff1a;Hyperopt 使用指南 前言1. Hyperopt是什么&#xff1f;2. Hyperopt的优缺点3. 如何使用 Hyperopt 进行调参3.1 安装 Hyperopt3.2 构建超参数空间3.3 定义目标函数3.4 运行 Hyperopt 优化3.5 获取最优超参数 4. XGB调参代码示例参考资料 前言…

《设计模式的艺术》笔记 - 面向对象设计原则

1、单一职责原则 一个类只负责单一功能领域中的相应职责。 2、开闭原则 一个软件实体应当对扩展开放&#xff0c;对修改关闭。即软件实体应当尽量在不修改原有代码的情况下进行扩展。 3、里氏代换原则 所有引用基类的地方必须能透明地使用其子类的对象。即在软件中将一个基类…

Hyperledger Fabric Docker 方式多机部署生产网络

规划网络拓扑 3 个 orderer 节点&#xff1b;组织 org1 , org1 下有两个 peer 节点&#xff0c; peer0 和 peer1; 组织 org2 , org2 下有两个 peer 节点&#xff0c; peer0 和 peer1; 因为我只有 3 台虚拟机资源所以没法实现完全的多机部署&#xff0c;资源使用规划如下&#…

关于ubuntu20.04(Linux)屏幕突然横屏的解决方案

今天在用笔记本接深度相机&#xff08;Intel RealSense Depth Cameras&#xff09;的一瞬间&#xff0c;我的ubuntu界面突然横屏了&#xff0c;当时很惊讶&#xff01;一时间不知所措&#xff0c;后面找到了解决方案&#xff1a; 参考链接&#xff1a; Ubuntu桌面旋转xrandr_…