Vue入门五（Vue-CLI项目搭建｜vue项目目录介绍｜vue项目开发规范｜es6导入导出语法）

一、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  # 推荐
	# 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. 勾选下图三个选项即可，然后回车保存配置

3. 选择vue版本
   
4. 然后直接以下步骤即可完成创建了
   
   

---

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）默认导入导出

	'导出语法'
		1.变量
		var name = 'jack'
		export default name // 只导出单个变量
		
		2.函数
		function add(a,b){
			return a+b
		}
		# 箭头函数方式
		var add=(a,b)=>a+b
		
		export default add // 只导出单个函数
		
		3.对象
		export default {
		    name:'汤米',
		    age:66,
		    add:(a,b)=>{
		        return a+b
		    }
		}
		'注意：一个组件只能导出一个export default'
	
	'导入语法'
   import 别名  from '路径'  # 别名就是导出的对象
   这里的路径分为两种
   		1.相对导入 例如：import 别名 from './xx/xx'  # 相对于当前文件
   		2.绝对导入 例如：import 别名 from '@/xx/xx'  # @符号就是src路径,从src路径开始导入


	'导入后使用'
		别名.属性、方法等

2）命名导入导出

	'导出语法'
		1.变量
		export const name='谢尔比'
		export const gender='男'
	
		2.函数
		export const add=(a,b)=>a+b
		
		3.对象
		export const obj={
		    name:'汤米',
		    age:22,
		    show(){
		        alert('hello world')
		    }
		}
		
		'支持导出多个export const'
		
	'导入语法'
	# 想导入那个export const就导入那个即可，无需全部导入
	 import {name,age,gender,add,obj}  from '路径'  # 路径和默认导入方式一样，两种相对绝对
	
	'导入后使用'
		直接使用导入的名字即可
		如：obj.name , obj.show()

补充，如果包下有个index.js，可以直接导入index.js上一层即可，(如：import home from '@/xxx/index')可以吧index省略掉