vue3.0基础搭建
[toc]
基础环境搭建
Nodejs版本
3.x需要在Node.js
8.9或更高版本(推荐8.11.0+),点击这里可以安装node ;由于笔者的当前长期支持版: 12.18.3 。
查询你的node版本:
node -v
安装vue-cli
npm install -g @vue/cli // 安装cli3.x
vue --version // 查询版本是否为3.x
//加速下载使用cnpm
cnpm install -g @vue/cli
开始第一个 vue3 的项目
1. 命令行:
vue create my_cli3_20200819
2. 选择模板
default[vue2]
(默认配置)vue2、default[vue3]
(默认配置)vue3和Manually select features
(手动配置);默认配置只有babel
和eslint
这里可以选择手动配置。
3.选择配置
根据你的项目需要来选择配置,空格键是选中与取消,A键是全选
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 检查项目所需的功能:(按<space>选择,<a>切换所有,<i>反转选择)
>( ) Choose Vue version // 选择vue的版本
( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // PWA 支持
( ) Router // 支持 vue-router
( ) Vuex // 支持 vuex
( ) CSS Pre-processors // 支持 CSS 预处理器。
( ) Linter / Formatter // 支持代码风格检查和格式化。
( ) Unit Testing // 支持单元测试。
( ) E2E Testing
4. 选择历史模式
5.选择css预处理器:
- 如果你选择了Css预处理器选项,会让你选择这个(node sass)
6. 选择Eslint代码验证规则:
- 这里选择保存时报错
-
选择额外的 lint 特性:
8. 把babel,postcss,eslint这些配置文件放哪:
-
保存预设
Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后,会让你写一个配置的名字:
Save preset as: name // 然后你下次进入配置可以直接使用你这次的配置了
11. 下载依赖
12. 关于下载node-saas的问题:
- 错误内容:
Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node": timeout
-
解决方式:
更新解决方案文章:
//下载win32-x64-72_binding.node 地址:https://github.com/sass/node-sass/releases/ //设置变量 set SASS_BINARY_PATH=D:\Download\Chrome_Down\win32-x64-72_binding.node //设置安装 npm install node-sass
13. 运行项目
cd my_cli3_20200819 npm run serve
UI 创建项目
vue ui
初识 vue
1. 添加 vue-next
vue add vue-next
2. vue 的特性
1. 特性简要说明
说明目前vue将计划支持IE11+
2. Composition API 体验
Options API
<template>
<div>
<span>{{count}}</span>
<p @click="plus">+</p>
<p @click="min">-</p>
</div>
</template>
<script>
export default {
name:'Counter',
data() {
return {
count:0
}
},
methods: {
plus () {
this.count++
},
min () {
this.count--
}
}
}
</script>
<style scoped>
</style>
Composition API
<template>
<div>
<span>{{state.count}}</span>
<p @click="plus">+</p>
<p @click="min">-</p>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name:'Counter_V3',
setup () {
const state = reactive({
count: 0,
})
function plus(){
state.count++
}
function min(){
state.count--
}
return {
state,
plus,
min
}
}
}
</script>
<style scoped>
</style>