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
}
}