开发规范
统一开发工具
- 使用的开发工具
- 开发工具需要安装的插件
- 技术框架选型
- 命名规范
- 项目命名:全部使用小写方式,以下划线进行分隔
- 目录命名:参照项目命名规则;有复数结构时采用复数命名方法
- 文件命名:components组件命名使用大驼峰命名
完善项目文件结构
- 设置浏览器图标
public/favicon.ico
替换为项目或者公司LOGO
- 创建以及约定目录
assets目录
创建放置图片的images目录,将相应的图片存入该目录;创建放置样式文件的css目录并放入样式文件views目录
存放页面级别的组件,最好一类业务的组件放在一起components目录
存放通用级别的组件common文件夹
:用于存放公用的且与项目依赖关系并不是很强的组件,该文件夹下的组件可以在其他项目直接使用content文件夹
:用于存放与项目关联性紧密的组件
- vue配置项
vue.config.js
,如果没有手动创建一下,填充内容详见下方 - 初始化公共样式:在assets文件夹下创建css文件夹,创建
normalize.css
文件存放公共样式(可以百度搜索reset.css文件),然后再创建base.css
对normalize.css
通过命令@import './normalize.css'
进行引用;然后在App.vue中通过@import url('./assets/css/base.css')
进行基础样式引用。 - 设置404页面:在views下创建
404.vue
文件,并在router/index.js
进行设置路由{path: '/:catchAll(.*)', name: 404, component: ()=> import('../views'index.vue)}
进行声明
- 安装必要的插件
- 使用命令:
npm install --save 插件名称以及版本号
- 使用命令:
vue.config.js
这里以对通过相对路径获取图片为例,进行演示
module.exports = {
configureWebpack: {
resolve:{
alias: {
'assets': '@/assets',
// 别名img代表‘@/assets/images’
'img': '@/assets/images'
}
}
},
// 公共路径(必须有)
publicPath: './'
}
使用
<template>
<div id="box"></div>
<img :src="imgsrc" />
<img src="~img/logo.png" />
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
setup(){
const state = reactive({
msg: 'htllo vue world',
imgsrc: require('img/logo.png')
})
return {
...toRefs(state)
}
}
}
</script>