vue3.0介绍简单入门

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、pandas是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入库

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。#快速上⼿ Vue.js 3.0 + Vite 开发

####with Vue.js 3.0 RC.5

内容概要

• Composition APIs
• 设计动机 / 核⼼优势
• 基于 Webpack 构建
• Vue CLI Preview
• 基于 Vite 构建
• Official Libraries

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZS3YEUkx-1603503487025)(C:\Users\admin\OneDrive\桌面\新建文件夹\微信截图_20201023091626.png)]

Vue.js 3.0 核⼼优势

• 没有 this，没烦恼
• 更好的类型推导能⼒（TypeScript）
• 更友好的 Tree-shaking ⽀持（渐进式体验）
• 更⼤的代码压缩空间
• 更灵活的逻辑复⽤能⼒

逻辑复⽤案例

import { ref, onMounted } from 'vue'
const useToggle = initialState => {
    const on = ref( initialState ?? false )
    const toggle = value => {
		on.value = value ?? !on.value
	}
	return { on, toggle }
}
createApp({
  setup () {
      return{
       	...useToggle()	
     }
})

import { ref, onMounted } from 'vue'

const usePosts => params{
    const posts = ref([])
    onMounted(async () => {
    const url = new URL('https://jsonplaceholder.typicode.com/posts')
    params 66 Object.entries(params).forEach(([ key, value ]) => url.searchParams.append(key, value)) 
    const res = await fetch(url)
    posts.value = await res.json()
   })
    return { posts }
}

createApp({
    setup () {
        return
        ...usePosts({_ limit: 10 })
	}
})

import{ ref, onMounted, onUnmounted } from 'vue'
const useWindowSize = () => {
    const width = ref( window.innerwidth )
    const height = ref( window.innerHeight )
    const update = ()=> {
        width.value = wi ndow. innerwidth
    	height.value = window . innerHeight
    }
    onMounted(()=> window.addEventListener('resize', update ))
    onUnmounted(() => window.removeEventL istener('resize', update))
    
    return { width, height }
}
createApp({
    setup () {
        return {
        ...useWindowSize()
    }
})

import { ref, onMounted, onUnmounted } from 'vue'
const useHash = () => {
    const hash = ref(location.hash)
    
    const update = () => {
   		 hash.value = location.hash
    }
    
    onMounted(() => window.addEventListener("hashchange"，update))
    onUnmounted(()=> window.removeEventListener("hashchange"，update))
    
    return { hash }
}
createApp( {
    setup() {
         return {
            ...useHash( )
         }
      }
})

基于 Webpack 构建

└─ vue-next-sample ····························· project root   
    ├─ public ··································· static dir   
    │   └─ index.html ··························· index template   
    ├─ src ······································ source dir   
    │  ├─ App.vue ······························· root component (sfc)   
    │  └─ main.js ······························· app entry  
    ├─ package.json ····························· package file   
    └─ webpack.config.js ························ webpack config 

#创建项目目录
$ mkdir vue-next- sample

#初始化package. json文件，管理项目依赖
$ npm init --yes

#安装Vue.js3.0模块
$ npm i vue@next

#安装Webpack 相关模块
$ npm i webpack webpack-cli webpack-dev-server -- save-dev

#安装一些需要用到的Webpack 插件
$ npm i html-webpack-plugin mini-css-extract-plugin css-loader -- save- dev

#安装Vue. js 单文件组件的加载器
$ npm i vue-loaderanext avue/ compiler-sfc -- save-dev

const HtmLWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = env => ({
    mode: env .production ? 'production' : 'deve Lopment',
    entry: './src/main.js',
    output: {
    	filename: ' bundle.js 
    },
    module:{
        rules: [
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
        ]
    },
    plugins:[
        new VueLoaderPlugin(), 
        new Html WebpackPlugin({
            title:'Vue.js 3.0 Beta'，
            template: 'public/index.html'
        })
    ]
})

基于 Vue CLI Preview

• 截⽌⽬前 Vue CLI 已经开始⽀持 Vue.js 3.0
• 使⽤⽅法
• 安装最新版本 @vue/cli，或者直接使⽤ npx @vue/cli
• 在选择预设时直接选择 Vue 3 Preview

基于 Vite 构建

参考： https://github.com/zce/vite-essentials

结合 Official Libraries、TypeScript、Vue Router

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

export default createRouter({
    history: createWebHistory( process.env.BASE URL),
    routes:[
        {
        path: '/',
        name:'Home'，
        Component: Home
        },
        {
        path: '/about/:slug?',
        name :'About',
        component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
        }
    ]
})

import { useRoute } from 'vue-router'
export default {
    name: 'Home',
    setup () {
    	const route = useRoute()
    	console. log( route,
        // route →{ path: }，name:l{},params :{}，query: {}, hash: {},.}
    }
}

Vuex

import { createStore } from 'vuex'

export default createStore( {
    state: {
    	// ...
    },
    getters: {
    	// ...
    },
    mutations: {
    	// ...
    },
    actions: {
    	// ...
    },
    modules: {
    	// ...
    },
    plugins:[
    	// ...
    ]
})

import { mapGetters, mapActions } from 'vuex'
export default {
    name : 'Counter'
    computed: mapGetters( {
        count:'count'
    }),
    methods: mapActions( {
        increment:' increment',
        incrementAsync:'incrementAsync',
        decrement:' decrement'，
        decrementAsync:' decrementAsync'
    })
}

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
    name: ' Counter'，
    setup () {
        const store = useStore( )
        const count = computed(() => store.getters.count)
        
        const increment = () => store.dispatch('increment )
        const incrementAsync = () => store.dispatch('incrementAsync')
        const decrement = () => store.dispatch('decrement')
        const decrementAsync = () => store.dispatch('dec rementAsync')
        
        return { count, increment, incrementAsync, decrement, decrementAsync }
}

TIPs. 别在成熟项⽬中使⽤

store.dispatch(‘incrementAsync’)
const decrement = () => store.dispatch(‘decrement’)
const decrementAsync = () => store.dispatch(‘dec rementAsync’)

    return { count, increment, incrementAsync, decrement, decrementAsync }

}

# TIPs. 别在成熟项⽬中使⽤