开发规范

统一开发工具

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

11-Vue前端项目开发基本准备相关推荐

linux系统下docker搭建vue前端项目开发运行环境详解
1. 初衷最近做了几个前后端项目,在前后端项目链条的时候,发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错, npm install一直无法安装,但是我在linux系统下面安 ...
前端规范 - 前端项目开发规范
0 前言好好做业务,提高自己的工程能力 [强制] 1 开启eslint 根据团队的习惯,制定适合自己的rules 比如 no-console no-debugger可以关闭 [强制] 2 新项目使用 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
Vue的项目开发，你应该知道什么
Vue进行项目开发,我们需要懂得知识栈,应该由这么一些部分构成:vue.js.vue-router.vuex.axios.vue的单文件组件.element-ui等.这些部分,就是vue项目开发的全家 ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量进入找到Path进入这里填你的node.js的安装路径验 ...
Vue前端项目自适应布局
Vue前端项目自适应布局一.单位尺寸二.基于rem实现自适应布局一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...

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

文章目录

开发规范

统一开发工具

完善项目文件结构

vue.config.js

使用

11-Vue前端项目开发基本准备相关推荐

最新文章

热门文章