11-Vue前端项目开发基本准备

开发规范

统一开发工具

• 使用的开发工具
  • 开发工具需要安装的插件
• 技术框架选型
• 命名规范
  • 项目命名：全部使用小写方式，以下划线进行分隔
  • 目录命名：参照项目命名规则；有复数结构时采用复数命名方法
  • 文件命名：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>