VUE脚手架-Element-UI

最新推荐文章于 2024-09-12 07:50:54 发布

旺旺妙脆角

最新推荐文章于 2024-09-12 07:50:54 发布

阅读量648

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： vue.js javascript 前端

26 篇文章

订阅专栏

本文介绍了Vue脚手架的基本用法，包括如何基于3.x和2.x版本创建Vue项目，以及项目结构分析和自定义配置。同时，详细讲解了Element-UI的安装和基本使用，引导读者进行图形化界面的组件应用。

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

在这里插入图片描述

 npm install -g @vue/cli

在这里插入图片描述
基于3.x版本的脚手架创建vue项目

利用交互式命令行来创造项目

完成

vue ui

在这里插入图片描述
3. 基于 2.x 的旧模板，创建旧版 vue 项目

 npm install -g @vue/cli-init
 vue init webpack my-project

在这里插入图片描述

完成

Vue 脚手架生成的项目结构分析
在这里插入图片描述
Vue 脚手架的自定义配置

"vue": {
        "devServer": {
            "port": "8888",
            "open": true
        }
    }
}

在这里插入图片描述

npm run serve

在这里插入图片描述
通过单独的配置文件配置项目

在这里插入图片描述

 // vue.config.js
 module.exports = {
 devServer: {
 port: 8888
 }

在这里插入图片描述

npm run serve

在这里插入图片描述

在这里插入图片描述
https://element.eleme.cn/#/zh-CN/component/installation

// 导入组件库
 import ElementUI from 'element-ui';
 // 导入组件相关样式
 import 'element-ui/lib/theme-chalk/index.css';
 // 配置 Vue 插件
 Vue.use(ElementUI);

在这里插入图片描述

基于图形化界面自动安装

完成