vue3.0体验版，尝鲜版-基础语法

vue3.0体验版，尝鲜版-基础语法

一.安装nodejs，vue3.0脚手架

1.安装Nodejs

官网安装。
官网完成后查看版本号node -v，npm -v，出现版本号即安装成功。（若没有，就重启电脑再试）node版本必须是8.9或以上版本。

2.管理nodejs版本（非必装）

执行命令安装：npm install -g n
n latest（升级nodejs到最新版本）
n stable（升级nodejs到最新稳定版本）
n后面也跟随版本号，例如：n v0.10.26

3.全局安装vue-cli3.0脚手架

卸载：如果已经安装了旧版本的vue-cli（1.x或者2.x），需要先卸载：npm uninstall vue-cli -g
安装：npm install -g@vue/cli（安装3.x）
npm install -g vue-cli（安装1.x或者2.x）
查看版本号：vue -V（注意：V是大写）
【注】安装了vue3.0之后，vue2.0初始化vue项目的命令：vue init就没法用了。
若在vue3.0版本上还想用这个命令，需要安装3.0对2.0版本的桥接：npm install -g @vue.cli-init。后面再用vue init就是可以的。

4.安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

二.创建项目仓库

1.git基础命令

拷贝项目：git clone+仓库地址
创建分支：git branch
切换分支：git checkout
创建并进入分支：git checkout -b （这个命令是上面两个命令的合并）
查看状态：git status
添加所有文件：git add .
提交：git commit -m “描述”
拉取：git pull
推送：git push origin master
仅查看本地分支：git branch --list
查看分支（包含远程分支）：git branch -a

2.步骤

1）先拷贝项目，不管里面有没有代码
2）git branch --list查看有几个分支，目前处于哪个分支
matster分支：主分支，一般都不会在这个分支上开发
dev分支：开发分支，在这个分支上开发
3）git branch dev创建dev分支
git branch --list查看分支，目前应该是两个分支了
4）git checkout dev切换到dev分支，然后git push，发现报错提示“远程没有这个分支”，是因为分支在本地创建了，还没有推送到远程。那么根据错误提示把这个分支提交到远程上去：git push --set-upstream origin dev
5）版本分支和bug分支
版本分支：建立于dev分支下面
feature-vueAdmin-V1.0.0-20190919：分支完善名称
分支类型-项目名称-版本号-建立分支日期

BUG分支：建立于当前版本分支下面
bug-101241-20191020：BUG分支完善名称
分支类型-BUG的ID-建立分支的日期

命令：
git checkout -b feature-vueAdmin v1.0.0-20201124：创建并进入分支
git push 推送报错，根据错误提示git push --set-upstream origin dev推送远程分支。

三.构建项目

1.构建项目

vue create vue-admin（3.x的命令）
【注】vue2.x构建项目的命令是：
vue init webpack my-app //my-app为自定义项目名称
他是创建一个基于webpack模板的新项目

2.创建步骤：

有相同目录，合并Merge->配置，选择自定义Manually->需要安装的就空格自动标星号（Babe,Router,vuex,css Pre-processers,Linter/Formatter)，然后回车->选择路由模式，暂时选no（hash和history。hash是地址栏url中有#符号，history是利用了h5的pushState()和replace()方法。这个方法需要后端Apach和Nginx进行简单的路由配置，否则会把报错。如果不在意#号，就用hash，在意就用history）->css编辑器（node-scss）->代码类型检查的规范（ESLint+Prettier最后一种）->在什么情况下会进行代码检测（save保存的时候）->配置文件放在哪个位置（config file第一个保存在单独的配置文件）->是否保存之前选择的选项（yes，类似于之前的111），回车即可。

3.进入项目

cd vue-admin

4.跑一下项目

npm run serve

四.2.0和3.0的差异

1.默认的项目目录结构发生了变化

• 去除了static.config,build
• 新增了public
• 安装项目是自动下载node-model

2.构建方式

五.vue.config.js

【注】这个文件是网上百度然后复制到根目录里，这个文件后期的修改都要重启项目

1.引入css

1）在vue.config.js的css的loaderOption里面配置

sass:{
	data:'@import "./src/styles/main.scss"'
}

【注】空格问题：空格去掉，先紧接着上面，在回撤下来。
如果实在解决不了就在vue.config.js里面的lintOnSave:fale关闭验证。

2）src下面创建一个文件夹styles，在这里面放入所有的css文件，根文件是main.scss。这里面写css就会在页面有样式效果。

3）如何还有其他的scss，如normalize.scss，就将这个文件也放入scr的styles里面，然后在main.scss引入他
@import ‘./normalize.scss’
【注】的你这个样式要生效，在App.vue中取出无用的css代码后，注意要保留#app{}，否则样式不生效。

2.引入文件路径的简写配置

在vue.config.js的configWebpack中可配置

configWebpack:()=>{
	config.resolv={
 		extension:['.js','.json','.vue'],//引入的文件有这些后缀都不用添加，自动添加文件名后缀
 		alias:{
 			'@':path.resolve(_dirname,'./src'),
		}
	}
}

六.2.0语法转3.0

最新版的3.0APP将vue function API更正为Vue composition API，也提供了vue3.0特性的长线版本，提供了在vue2.0能够提前体验此API的库@vue/composition-api。也就是说，vue2.0也可以用composition API。

1.安装依赖

命令：npm install @vue/composition-api --save
然后在main.js里面引入：
import vueComposition from ‘@/vue/composition-api’;
Vue use(vueComposition)

2.新特性函数

1）setup函数
按照官网说法，setup函数是一个新的vue组件选项，是用于在组件中使用composition API的主入口。

export default{
	//这里面防止data数据，生命周期，自定义函数
	setup(props,content){
		content.attrs,
		content.slots,
		content.parent,
		content.root,
		content.emit,
		content.refs,//2.0的写法是this.$refs
		...
	}
}

2）reactive（声明的类型是对象类型时使用）

import {reactive} from '@vue/composition-api'
setup(props,content){
	const menuTab=reactive([
		{txt:'登录',currnt:true,type:'login'},
		{txt:'注册',current:false,type:'register'}
	])
	console.log(menTab)
}

3）ref（声明的类型是基础类型）

import {ref} from '@vue/composition-api'
setup(props,content){
	const model=ref('login')
	console.log(model.value)//ref定义的需要.value才能拿到，赋值也要赋值给.value
}

4）isRef和toRefs
isRef判断一个对象是否是ref对象

import {isRef} from '@vue/composition-api'
setup(props,content){
	console.log(isRef(model))//判断model是否是基础类型，是就是true
}

toRefs将reactive对象转换成普通类型的对象，保证对象解构成拓展运算符而不会丢失响应式对象的响应。

import {toRefs} from '@vue/composition-api'
setup(props,content){
	//reactive对象
	const obj=reactive({
		x:0,y:0
	})
	console.log(obj.x)//0

	//普通对象
	const obj2=toRefs(obj);
	console.log(obj2.x.value)//0
}

这个语法一般用在es6的解构赋值里面会常用到

function useMousePostion(){
	const pos=reactive({x:0,y:0})
	return toRefs(pos)
}
const {x,y}=useMousePosition()

5）生命周期挂钩和函数的写法

import {onMounted,onUpdated} from '@vue/composition-api'
setup(props.content){
	//声明函数
	const submitBtn=(params)=>{
		console.log(params)
		model.value=params.type
	}
	
	//声明周期
	onMounted(()=>{
		console.log('Mounted')
	})
	onUpdated(()=>{
		console.log('upDated')
	})
}

【注】
①vue composition删除了onBeforeCreate和onCreated，因为setup总是在创建实例对象时调用，即onBeforeCreate之后和onCreated之前调用，因此onBeforeCreate和onCreated将可以使用setup进行代替。
②2.x生命周期选项和composition API之间的映射
beforeCreate和created->使用setup()
beforeMount->onBeforeMount
mounted->onMounted
methods->去除。用普通方法写方法
beforeUpdate->onBeforeUpdate
update->onUpdate
beforeDestory->onBeforeDestory
destory->onDestory
erroeCaptured->onErrorCaptured

③去除了2.x生命周期等之外，composition API还提供了一些调试挂钩

④setup里面所有的变量和方法，最后都要return出去

setup(props,content){
	return {
		model,
		obj,
		submitBtn
	}
}