前端学习之前端工程化(二):Vue-cli3和Element-UI
2023-09-27 14:29:29 时间
文章目录
一、vue脚手架:
1. vue脚手架的基本使用:
vue脚手架用于快速生成vue项目基础架构, 其官网: https://cli.vuejs.org/zh
2. 使用步骤:
2.1 安装3.x版本的vue脚手架:
npm install -g @vue/cli
2.2 基于3.x版本的脚手架创建vue项目
2.2.1 基于交互式命令行的方式, 创建新版vue项目
vue create my-project
运行项目:
2.2.2 基于图形化界面的方式, 创建新版vue项目:
vue ui
2.2.3 基于2.x的旧模板, 创建旧版vue项目(了解):
npm install -g @vue/cli-init
vue init webpack my-project
3. 分析Vue脚手架生成的项目结构
目录 | 说明 |
---|---|
node_modules | 依赖包目录 |
public | 静态资源目录 |
src | 源码目录 |
src/assets | 资源目录 |
src/components | 组件目录 |
src/views | 视图组件目录 |
src/App.vue | 根组件 |
src/main.js | 入口js |
src/router.js | 路由js |
babel.config.js | babel配置文件 |
.eslintrc.js | eslint语法配置文件 |
4. Vue脚手架的自定义配置:
4.2 通过package.json配置项目
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
注意:
不推荐使用这种方式, 因为package.json主要用来管理包的配置信息;;为了方便维护, 推荐将vue脚手架相关的配置, 单独定义到vue.config.js配置文件中;
4.2 通过单独的配置文件进行配置,创建vue.config.js:
- 在项目根目录创建文件 vue.config.js
- 在该文件中进行相关配置, 从而覆盖默认配置;
module.exports = {
devServer:{
port:8888,
open:true
}
}
二、Element-UI:
1. Element-UI的基本使用:
Element-UI:一套基于2.0的桌面端组件库
官网地址: http://element-cn.eleme.io/#/zh-CN
2. 基于命令行方式手动安装:
2.1 安装依赖包:
npm install element-ui -S
2.2 导入使用:
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)
3. 基于图形化的界面自动安装:
3.1 安装:
- 运行 vue ui 命令, 打开图形化界面;
- 通过 vue 项目管理器 , 进入具体的项目配置面板;
- 点击 插件 -> 添加插件 , 进入插件查询面板;
- 搜索 vue-cli-plugin-element 并安装;
- 配置插件, 实现按需导入, 从而减少打包后项目的体积;
相关文章
- vue 学习
- (尚054)Vue_源码分析_模板解析_事件指令
- vue学习01
- 【Vue】路由组件中失去焦点和获得焦点的两个事件
- axios基础学习——通过 Vue + axios 获取接口数据的小demo
- vue 项目的开发流程
- Vue - 解决 ElementUI / Ant Design Vue 框架组件带有默认回调参数方法时,同时传递默认参数和自定义参数
- Vue - 动态添加移除 DOM元素(输入框示例)
- Vue前端框架Element 的form表单项el-form-item的label中空格不起效和多个空格只显示一个的问题解决
- Vue.js高仿饿了么外卖App学习记录
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- 从头开始学习vue-router
- Vue新建一个demo项目
- vue学习路线
- Vue 项目本地 Mock 数据
- 03-vue基础-组件
- vue-router路由传参之query和params
- vue实战入门后台篇四:springboot+mybatis实现网站后台-增删改查功能实现
- vue学习笔记二:HBuilder X框架搭建
- vue学习小笔记
- 【ant Design vue使用腾讯播放器实现监控视频直播、点播,多个视频同时播放】
- vue学习:使用tab标签页时,刷新页面停留在当前tab
- Vue中自定义指令总结及封装一个类似于v-bind的自定义指令
- Vue学习第35天——模拟项目上线基本流程
- Vue学习第29天——路由的props配置项的详解与案例(对比组件props配置项)
- Vue.js 技术揭秘学习 (3) render