关于vue的安装3.X，2.x和ElementUI的使用

最新推荐文章于 2024-12-07 20:55:49 发布

叫我福建

最新推荐文章于 2024-12-07 20:55:49 发布

阅读量895

点赞数

分类专栏： vue技术总结文章标签： vue

本文链接：https://blog.csdn.net/qq_38192709/article/details/114011989

版权

vue技术总结专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用Vue CLI创建3.x和2.x版本的项目，包括交互式命令行和图形化界面的方式。同时，讲解了Vue脚手架的自定义配置，推荐将配置写入vue.config.js文件。此外，还阐述了Element-UI的基本安装和使用，包括手动安装和图形化界面自动安装，并提供了按需导入的建议，以减小项目体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

## 4.1: 脚手架的基本用法

Vue 脚手架用于快速生成 Vue 项目基础架构
npm install -g @vue/cli

1:基于交互式命令行的方式，创建新版的 vue 项目

vue create my-project // 别中文，特殊符号

2: 基于图形化界面的方式，创建新版 vue 项目

vue ui

3: 基于 2.X的旧模板，创建旧版 vue项目

npm install -g @vue/cli-init // 2.X 版本一定要安装这个
vue init webpack my-project

4.3 Vue 脚手架的自定义配置

通过 package.json 配置项目【必须是符合 json 语法】
【不推荐使用这种配置方式，因为 package.json 主要用来管理包的配置信息，
为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中
】
“vue” : {
“devServer” : {
“port”: “8080”,
“open”: true
}
}

vue.config.js

module.exports = {
devServer: {
open: true,
port: 8888
}
}

5: Element-UI 的基本使用

1：基于命令方式手动安装
①：安装依赖包： npm i element-ui -S
②：导入 Element-UI 相关资源

// 入口文件 main.js 里面导入
import ElementUI from ‘element-ui’ // 导入组件库
import ‘element-ui/lib/theme-chalk/index.css’ // 导入相关组件样式
Vue.use(ElementUI) // 配置 vue 插件

2: 基于图形化界面自动安装 Element-UI
【 2.X版本的 VUE 安装 Element-UI 出现的问题很少，而且很好解决，其它版本嘛… …自己去试试】
① 运行 vue ui 命令，打开图形化界面
② 通过 Vue 项目管理器，进入具体的项目配置面板
③ 点击插件 --> 添加插件，进入插件查询面板
④ 搜索 vue-cli-plugin-element 并安装
⑤ 配置插件，并实现按需导入，从而减少打包后项目的体积