Vue3.0到底带来来哪些变化视频笔记1

创建项目目录

mkdir vue-next-sample

初始化package.json文件 

npm init --yes

安装Vue3.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 --save-dev

安装Vue.js单文件组件的loader

npm i vue-loader@next @vue/compiler-sfc --save-dev

安装 css-loade

 npm i css-loader --save-dev

建立项目文件结构

src  源文件目录

public html文件目录

 

　　

在src目录建立Vue组件

App.vue

内代码

与Vue2.0的区别，可以定义多个div，Vue2.0只能挂载一个div

<template>
  <div>Hello {{ title }}</div>
  <div>{{ count }}</div>
  <div><button value="+" @click="increment">+</button></div>  
</template>

<script>
  //导入自定义组件和ref包裹器   
  import  { defineComponent,ref } from 'vue'
  export default defineComponent({
    setup () {

      const count=ref(1)

      const increment=()=>count.value++


      return {
        title:'vue.3.011111',
        count,
        increment
      }
    }
  })
</script>

<style>
div {
  color:blue;
}
</style>

 

 

建立入口主文件

main.js

import { createApp } from 'vue'
import App from './App.vue'

//创建应用对象
const app=createApp(App)
//挂载到html的节点，ID为root的div节点
app.mount('#root')

　　

建立webpack打包配置文件

webpack.config.js

// module.exports={

// }
const path=require('path')
const webpack=require('webpack')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')


//引入，未来写代码有智能提示，采用的es6规范的写法
// import  webpack from 'webpack'

/** 
*@type {webpack.Configuration}
*/
const config={
  entry:'./src/main.js',
  output:{
    filename:'bundle.js',
    path:path.join(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        use:'vue-loader'
      },
      {
        test:/\.css$/,
        use:[MiniCssExtractPlugin.loader,'css-loader']
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./public/index.html'
    }),
    new MiniCssExtractPlugin(),
    new VueLoaderPlugin(),  
    new webpack.HotModuleReplacementPlugin() //热更新插件
  ]
} 

module.exports=config

　　

public文件夹建立index.html用于挂载组件的html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

　　webpack打包

npx webpack

webpack热更新

npx webpack-dev-server --hot

 

Vue3.0的优势

没有this

更好的类型推导能力

更待的代码压缩空间

更友好的Tree Shaking支持

更灵活的逻辑复用能力

posted @ 2020-03-17 21:01  CelonY  阅读(516)  评论(0)    收藏  举报