vue3.0,vue-cli4,vite 初次尝试-前端-IT技术博客

vue3.0,vue-cli4,vite 初次尝试

时间:2021-04-21 14:00:00 浏览: 字体: 放大 缩小


vue3.0,vue-cli4,vite 初次尝试

 一、介绍

1。好久没更新新的东西了,一直忙着做项目,最近看了一次直播,才发现,vue3.0发布很久了,且优势很明显,react 17 也出现,当然这里不讲react。在vue上,不仅语法有变化,在打包编译上也有一个新的工具vite,这个文章分为两部分,一部风用vue-cli构建项目,一部分用vite构建一个。

 

2.为什么用vue3.0和vite呢。看一下官网不难发现:

  • a.包大小和性能 ,比vue2快了两倍,人在家中坐,KPI任务已完成;
  • b.composition-api;
  • c.tree-shaking 支持;
  • d.typescript;
  • e.custom renderer api;
  • f.新的虚拟dom架构;
  • g.vite真的强,Vite 将会使用 esbuild 构建项目依赖。Esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

 

二、 vue-cli 搭建vue3.0;

   1.有安装vue-cli 的话,可以直接升级,或者卸载重装

升级:npm update -g @vue/cli
卸载:npm uninstall vue-cli
安装:npm install -g @vue/cli 
2.创建项目

vue create your_name

 

3.用空格回车,选择你相应的组件依赖和框架

 这里选择:Manually select features ,自定义。上面其它是 vue3.0和 2.0.

 

    大概选的上面那些。

 

 

   选择3.x。

 

 

 路由history 模, y。

 

 

 这里用scss 。

 

 

 eslint 效验规则。

 

 

 是否保存就开启编译。

 

 

 配置的路径在哪里 这里选 package.json。

  

 

 

 这里问你是否将配置保存到本地;y。

 

 

 在给配置命名回车就创建项目了。

 最终项目结构如下:

 

 

项目下运行 npm run serve;启动。

4.安装我们用的依赖:element-ui。有意思的是。plues版本。

npm install element-plus --save

 

当然要用按需加载了:

npm install babel-plugin-import -D

 

然后,将 babel.config.js 修改为:

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};

 

打开 main.js 改为如下

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

// 引入element
import { ElButton, ElButtonGroup } from 'element-plus'

const components = [ElButton, ElButtonGroup]

const app = createApp(App)
const ElementOption = { size: 'small', zIndex: 500 }

components.forEach(component => {
// 注册
app.component(component.name, component)
})
// 设置全局默认样式
app.config.globalProperties.$ELEMENT = ElementOption

app.use(store)
app.use(router)
app.mount('#app')

 

重启,给页面添加一个 element按钮组件,成功。

 

三、 vite 搭建 vue3.0;

npm init @vitejs/app

 

 

  起名;

 

 

 选择vue;

 

 

 选择js;回车,创建成功。

 

 

 npm i;

npm run dev

 

按需引入 安装element:

npm install element-plus --save
npm install vite-plugin-style-import -D

 

 

更改main.js

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

// 引入element
import { ElButton, ElButtonGroup } from 'element-plus'

const components = [ElButton, ElButtonGroup]

const app = createApp(App)
const ElementOption = { size: 'small', zIndex: 500 }

components.forEach(component => {
    // 注册
    app.component(component.name, component)
})
// 设置全局默认样式
app.config.globalProperties.$ELEMENT = ElementOption

app.mount('#app')

 

 

然后,将 vite.config.js 修改为:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        vue(),
        styleImport({
            libs: [{
                libraryName: 'element-plus',
                esModule: true,
                ensureStyleFile: true,
                resolveStyle: (name) => {
                    name = name.slice(3)
                    return `element-plus/packages/theme-chalk/src/${name}.scss`;
                },
                resolveComponent: (name) => {
                    return `element-plus/lib/${name}`;
                },
            }]
        })
    ]
})

 

 

重启,即可安装成功!

 

四、下一遍详细介绍组件的测试安装使用。

 

 




 

标签: vue3.0vue-cli4vite 初次尝试vue3vuecli4vite 初次尝试