vue-cli 项目构建学习笔记(Vue3)
一 . 安装并创建项目
1 . 升级npm版本
npm install -g npm
2 . 安装脚手架
npm install -g @vue/cli
3. 创建项目
vue ui
会自动打开一个页面来创建项目
创建完项目之后 , 会自动创建my-project的文件夹
本文选了 Vue3 + eslint + less + routes + vuex 进行构建
二 . 启动参数详解
package.json中有启动命令 vue-cli-service , 参数如下
// serve 调试 vue-cli-service serve [options] /* --open 服务器启动时打开浏览器 --copy 将URL复制到服务器启动时的剪贴板 (直接到浏览器去粘贴就OK了 http://localhost:8080/) --mode 指定环境模式 (默认: development) --host host 地址 (default: 0.0.0.0) --port 端口号 (default: 8080) --https 使用https (default: false) */ /////////////////////////////////////////////////////////////////////////////////// // 打包 vue-cli-service build /* --mode 指定环境模式 (default: production) --dest 指定输出目录 (default: dist) --modern 构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包。 --target 允许您以项目库或Web组件的形式在项目内部构建任何组件 app | lib | wc | wc-async (default: app) ??? --name lib或者web组件库的名称 (default: "name" in package.json or entry filename) --no-clean 在构建项目之前不要删除输出目录(dist) --report 生成report.html以帮助分析包内容 --report-json 生成report.json来帮助分析包内容 --watch 监听 - 当有改变时 自动重新打包~ */
三 . 自定义工具类插件
通过自定义工具类插件 , 来学习使用vue的自定义插件和相关应用
整个工具类目录结构如下 :
| -- [utils]
| -- | -- [tools]
| -- | -- | -- index.js
| -- index.js
工具类
/utils/tools/index.js
// /utils/tools/index.js // 定义一个tools的工具类 const tools = { alarm: (msg) => { alert(msg) } } export default tools
插件类
/utils/index.js
// /utils/index.js // 引入tools import tools from './tools' // 聚合所有工具类 const utils = { tools: tools } // 插件必须使用 install进行export export default { install: (app, options) => { // 写入全局变量 app.config.globalProperties.$utils = utils } }
main.js中引入
import utils from './utils' const app = createApp(App) app.use(utils)
调用 :
// 调用代码 <button v-on:click="utilCall">Alarm AAA</button> export default { name: 'HelloWorld', // 自定义方法 methods: { utilCall () { this.$utils.tools.alarm('AAA') } } }
四 . vuex的持久化
vuex的持久化 , 就是把vuex的状态存到storage里 , 默认存在localStorage里 , 可以选择存到sessionStorage里
sessionStorage关闭浏览器就会去除
vuex的持久化通过vuex-persistedstate插件来实现 , 避免重复造轮子
npm install vuex-persistedstate --save
在store/index.js中引入即可
import { createStore } from 'vuex'
import persistedState from 'vuex-persistedstate'
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {},
plugins: [
// 使用sessionStorage , 空则默认使用localStorage
persistedState({ storage: window.sessionStorage })
]
})
五 . 同步route信息
使用插件vuex-router-sync , 插件的用途大家可以自行百度
#安装插件
npm install vuex-router-sync --save
在main.js中引入即可
import { sync } from 'vuex-router-sync'
// 我放在了createApp之前 , 不知道是不是必要条件 , 反正这样放没问题
sync(store, router)
在业务中引用
// 必须作为计算视图引用 computed: { routes () { return this.$store.state.route } } // 如果直接在data()里 , 只能引用到this.$store.state // 然后HTML中 , 使用 {{ state.route }}进行访问
<h5>computed routes >> {{ routes }}</h5>
可以放在App.vue中, 然后切换路由看效果
六 . 引入ajax工具
本文使用的是 axios , 版本 axios@0.21.0
首先引入插件 :
npm install --save axios vue-axios
# 直接引用即可 import axios from 'axios' # 也可以注册为全局变量进行引用 app.config.globalProperties.$http = axios // this.$http.post(...)
七 . 引入Element UI
element-ui只支持vue2 , vue3只能用element-plus
npm install element-plus --save
按需引入 :
npm install babel-plugin-component -D
修改babel.config.js
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component', { libraryName: 'element-plus', styleLibraryName: 'theme-chalk' } ] ] }
编写引入插件 plugins/element.js
import 'dayjs/locale/zh-cn' import lang from 'element-plus/lib/locale/lang/zh-cn' import locale from 'element-plus/lib/locale' import { ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, ElBreadcrumb, ElBreadcrumbItem, ElButton, ElButtonGroup, ElCalendar, ElCard, ElCarousel, ElCarouselItem, ElCascader, ElCascaderPanel, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElCol, ElCollapse, ElCollapseItem, ElCollapseTransition, ElColorPicker, ElContainer, ElDatePicker, ElDialog, ElDivider, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElFooter, ElForm, ElFormItem, ElHeader, ElIcon, ElImage, ElInput, ElInputNumber, ElLink, ElMain, ElMenu, ElMenuItem, ElMenuItemGroup, ElOption, ElOptionGroup, ElPageHeader, ElPagination, ElPopconfirm, ElPopover, ElPopper, ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElRow, ElScrollbar, ElSelect, ElSlider, ElStep, ElSteps, ElSubmenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTag, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTransfer, ElTree, ElUpload, ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification } from 'element-plus' const components = [ ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, ElBreadcrumb, ElBreadcrumbItem, ElButton, ElButtonGroup, ElCalendar, ElCard, ElCarousel, ElCarouselItem, ElCascader, ElCascaderPanel, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElCol, ElCollapse, ElCollapseItem, ElCollapseTransition, ElColorPicker, ElContainer, ElDatePicker, ElDialog, ElDivider, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElFooter, ElForm, ElFormItem, ElHeader, ElIcon, ElImage, ElInput, ElInputNumber, ElLink, ElMain, ElMenu, ElMenuItem, ElMenuItemGroup, ElOption, ElOptionGroup, ElPageHeader, ElPagination, ElPopconfirm, ElPopover, ElPopper, ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElRow, ElScrollbar, ElSelect, ElSlider, ElStep, ElSteps, ElSubmenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTag, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTransfer, ElTree, ElUpload ] const plugins = [ ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification ] // export default utils export default { install: (app, options) => { locale.use(lang) components.forEach(component => { app.component(component.name, component) }) plugins.forEach(plugin => { app.use(plugin) }) } }
最后再main.js中引入即可
import element from './plugins/element.js' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(element)
