前端工程化（Vue-cli3和Element-ui）

2024-02-21 10:28:04

文章目录

目标：

能够使用Vue脚手架
　　能够使用Element-UI

1、Vue脚手架

1.1、Vue脚手架的基本用法

Vue脚手架用于快速生成Vue项目基础架构，其官网地址为：https://cli.vuejs.org/zh/

使用步骤：

安装3.x版本的Vue脚手架
　　npm install -g @vue/cli

安装好以后，可以运行 vue -V 查看Vue脚手架是否安装好以及版本号

基于3.x版本的脚手架创建Vue项目

基于交互式命令的方式，创建新版Vue项目
　　vue create my-project
基于图形化界面的方式，创建新版vue项目
　　vue ui
基于2.x的旧版本，创建旧版vue项目
　　npm install -g @vue/cli-init
　　vue init webpack my-project(my-project是项目名称。自定义)

基于交互式命令的方式，创建新版Vue项目

vue create my-project

创建完Vue项目后，使用【上下箭头】来选中选项，使用【回车】执行某个选项；如果是多选的话，使用【空格】选中你要的选项即可。

图形化方式创建Vue项目

在终端中输入命令：vue ui后，会在浏览器中打开这个页面：

点击【创建】，选择创建项目的路径后，会进入【创建新新项目】的页面中，

如果【手动】创建项目，以下4个是必选的

基于2.x的旧版本，创建旧版vue项目

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

1.2、Vue脚手架生成的项目结构分析

如图所示：

1.3、Vue脚手架的自定义配置

只能通过 package.json配置项目或通过单独的配置文件配置项目，二者只能选其一

通过package.json配置项目

//必须是符合规范的json语法
"vue":{
    "devServer":{
        "port":8888,//指定项目启动的端口
        "open":true//项目启动之后自动打开浏览器
    }
},

注意：不推荐使用这种配置方式，因为package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架的相关配置单独定义到vue.config.js配置文件中。

通过单独的配置文件配置项目（推荐）

在项目的根目录创建文件vue.config.js
在该文件中进行相关配置，从而覆盖默认配置

//vue.config.js文件
module.exports = {
    devServer:{
        port:8888,//指定项目启动的端口
        open:true//项目启动之后自动打开浏览器
    }
}

在终端输入npm run serve 来运行项目

2、Element-UI的基本使用

Element-UI:一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。
官网地址为：http://element-cn.eleme.io/#/zh-CN

基于命令行方式手动安装

安装依赖包 npm i element-ui -s
导入Element-UI相关资源

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