VUE 3.0 教程 [一个后端的学习笔记]

2,452 阅读2分钟

vue3.0基础搭建

[toc]

基础环境搭建

Nodejs版本

3.x需要在Node.js8.9或更高版本(推荐8.11.0+),点击这里可以安装node ;由于笔者的当前长期支持版: 12.18.3

image-20200817223136275

查询你的node版本:

node -v

node版本信息

安装vue-cli

npm install -g @vue/cli // 安装cli3.x 
vue --version // 查询版本是否为3.x
//加速下载使用cnpm
cnpm install -g @vue/cli

vue的版本

开始第一个 vue3 的项目

1. 命令行:

vue create my_cli3_20200819

2. 选择模板

vue的预设

default[vue2](默认配置)vue2、default[vue3](默认配置)vue3和Manually select features(手动配置);默认配置只有babeleslint这里可以选择手动配置。

3.选择配置

根据你的项目需要来选择配置,空格键是选中与取消,A键是全选

vue的特性选择

  ? 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. 选择历史模式

vue的历史模式

5.选择css预处理器:

  • 如果你选择了Css预处理器选项,会让你选择这个(node sass)

vue的除上述处理器

6. 选择Eslint代码验证规则:

  • 这里选择保存时报错

Eslint代码验证规则

  1. 选择额外的 lint 特性:

image-20200817231530046

8. 把babel,postcss,eslint这些配置文件放哪:

image-20200817231552380

  1. 保存预设

image-20200817231610480

Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后,会让你写一个配置的名字:
Save preset as:  name // 然后你下次进入配置可以直接使用你这次的配置了

11. 下载依赖

image-20200817231749149

12. 关于下载node-saas的问题:

  • 错误内容:
Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node": timeout
运行截图

UI 创建项目

vue ui

初识 vue

1. 添加 vue-next

vue add vue-next

2. vue 的特性

1. 特性简要说明
20200829150000555

说明目前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>

参考资料