Vue脚手架
Vue脚手架的基本用法
-
Vue脚手架概述
- Vue脚手架用于快速生成Vue项目基础架构,其官网是:
https://cli.vuejs.org/zh/
- Vue脚手架用于快速生成Vue项目基础架构,其官网是:
-
使用步骤
- 安装3.x版本的Vue脚手架
npm install -g @vue/cli
- 安装3.x版本的Vue脚手架
-
Vue脚手架基本用法
- 基于交互式命令行的方式,创建新版vue项目
vue create my-project
- 基于图形化界面的方式,创建新版vue项目
vue ui
babel router linter/formate 使用配置文件
- 基于2.x的旧模板,创建旧版vue项目,不推荐
npm install -g @vue/cli-init
vue init webpack my-project
- 基于交互式命令行的方式,创建新版vue项目
-
Vue脚手架生成的项目结构分析
node_modules
依赖包目录public
静态资源目录src
组件源码目录assets
存放样式表、图片等静态资源components
Vue单文件组件view
视图组件、模板引擎App.vue
项目根组件,承载所有组件的根组件main.js
项目中打包入口文件router.js
路由相关配置
babel.config.js
babel配置文件eslintrc.js
语法相关的配置文件gitignore
git忽略文件package.json
包管理配置文件postcss.config.js
配置前缀等postcss插件
-
Vue脚手架的自定义配置
- 通过package.json配置项目
- 不推荐使用这种配置方式。
- 因为package.json主要用来管理包的配置信息
- 为了维护方便,推荐使用vue脚手架相关的配置
- 单独定义到vue.config.js配置文件中
- 不推荐使用这种配置方式。
- 通过单独的配置文件配置项目
- 在项目的根目录创建文件vue.config.js
- 在该文件中进行相关配置,从而覆盖默认配置
- 通过package.json配置项目
// package.json
// 必须是符合规范的json语法”
"vue": {
"devServer": {
"port": "8888",
"open": true
}
}
// vue.config.js
// 在该文件中进行相关配置,从而覆盖默认配置
module.exports = {
devServer: {
port: 8888,
// 默认打开浏览器
open: true
}
}
Element-UI的基本使用##
-
概述
- Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库
- 官网地址:
http://element-cn.eleme.io/#/zh-CN
-
基于命令行方式手动安装
- 安装依赖包
npm i element-ui -S
- 导入 Element-UI 相关资源
- 安装依赖包
// main.js
// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置Vue插件
Vue.use(ElementUI);
- 基于图形化界面自动安装
- 运行
vue ui
命令,打开图形化界面 - 通过Vue项目管理器,进入具体的项目配置面板
- 点击
插件 - 添加插件
,进入插件查询面板 - 搜索
vue-cli-plugin-element
并安装 - 配置插件,实现按需导入,从而减少打包后项目的体积
- git初始化:
init project
- 运行