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

发布时间:2024年01月11日

一、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的区别?


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  # 推荐
	# OR
	yarn 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.js
			index.js		  vue-router配置
		-store                安装了Vuex,就会有这个文件夹,下面有个index.js
			index.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 {}中写Js
		5.在组件style中写css样式

四、es6导入导出语法

1)默认导入导出

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

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

2)命名导入导出

支持导出多个

文章来源:https://blog.csdn.net/achen_m/article/details/135536633
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。