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

  • A+
所属分类:Web前端
摘要

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


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.用空格回车,选择你相应的组件依赖和框架

vue3.0,vue-cli4,vite 初次尝试
 这里选择:Manually select features ,自定义。上面其它是 vue3.0和 2.0.

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

 

    大概选的上面那些。

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

 

 

   选择3.x。

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

 

 

 路由history 模, y。

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

 

 

 这里用scss 。

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

 

 

 eslint 效验规则。

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

 

 

 是否保存就开启编译。

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

 

 

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

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

 

 

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

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

 

 

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

 最终项目结构如下:

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

 

项目下运行 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

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

 

 

  起名;

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

 

 

 选择vue;

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

 

 

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

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

 

 

 npm i;  npm run dev

 

按需引入 安装element:

npm install element-plus --save
npm install vite-plugin-style-import -D
npm install node-sass -D
npm install sass-loader -D
npm install sass -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}`;                 },             }]         })     ] })

 

 

重启,即可安装成功!

 

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