vue项目结构解析

最新推荐文章于 2024-04-18 10:33:01 发布
最新推荐文章于 2024-04-18 10:33:01 发布
阅读量2.5k 收藏 15
点赞数 1
分类专栏： vue配置 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39352650/article/details/120123495
版权

0. 前言

在我目前的工中很少自己动手搭建一个项目，所以对于开发开始前的项目搭建以及项目各项配置相对理解的不够透彻。这次需要开发一个运行在终端上(类似ATM机的操作)的售楼签约系统。由于 UI 的不适配决定从头开始创建一个新项目。于是在此对项目的创建和配置做一个总结

  • 创建 vue 项目可以有多种方式，这里介绍脚手架创建方式

    全局安装vue-cli:

    npm install -g @vue/cli
# OR
yarn global add @vue/cli

    创建一个项目:

    // 进到你希望项目放到的那个文件夹目录下，然后运行如下命令
vue create XXX-XXX  (项目名称)

    运行完创建命令后会出现选择预设的选项，我这里选的是manually select features,然后选择了

    Babel、Router、Vuex、CSS Pre-processors、Lint这些插件，并选择在创建单独的文件用于配置这些插件。

    创建vue项目更多详细的内容可以访问 vue 脚手架创建项目

  • 项目创建完成后，默认的目录展示如下：
    在这里插入图片描述
    主要分析有以下这些文件，点击文件可快速定位文件的位置

  1. .browserslistrc
  2. .eslintrc.js
  3. gitignore
  4. README.md
  5. babel.config.js
  6. package.json
  7. vue.config.js
  8. env配置环境变量文件
  9. .prettierrc

1. 结构分析

具体的src和public文件夹等，这里不做过多的介绍，主要介绍根目录下的相关配置文件的内容

① .browserslistrc

该文件的作用是根据提供的目标浏览器的环境，来智能添加 css 前缀，js 的 polyfill 垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。

默认创建的项目中，.browserslistrc文件内容如下：

> 1%
last 2 versions
not dead

分别代表1.全球超过 1%人使用的浏览器；2.所有浏览器兼容到最后两个版本，再以前的就不兼容；3.不兼容已经在市面下架“死去”的浏览器。以下是更多相关的配置和介绍：

例子说明
> 1%全球超过 1%人使用的浏览器
> 5% in US指定国家使用率覆盖
last 2 versions所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本
Firefox ESR火狐最新版本
Firefox > 20指定浏览器的版本范围
not ie <=8方向排除部分版本
Firefox 12.1指定浏览器的兼容到指定版本
unreleased versions所有浏览器的 beta 测试版本
unreleased Chrome versions指定浏览器的测试版本
since 20132013 年之后发布的所有版本

② .eslintrc.js

这个文件主要用于配置项目的 eslint 校验，对于一个团队来说，每个人有每个人写代码的风格和习惯，有人喜欢结尾加分号，有人不加，有人习惯使用双引号，有人习惯单引号，当然这些不足以影响项目的运行，但是 eslint 还可以配置更加重要的规范，来统一代码风格和预防一些代码隐患。所以这个文件相对团队开发来说是比较重要的。

.eslintrc.js文件默认导出一个对象，以下是创建 vue 项目后 eslintrc 文件的默认内容，结尾处会提供一个更详细的 eslint 配置文件。

module.exports = {
  // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
  // env表示一个环境，预定义了一组全局变量
  env: {
    node: true // 定义了Node.js 全局变量和 Node.js 作用域。
  },
  // extends 一个配置文件可以被基础配置中的已启用的规则继承，如下设置继承了数组中的三项规则。其中值为 "eslint:recommended" 的 extends 属性会启用一系列eslint核心规则。
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  // ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
  parserOptions: {
    parser: 'babel-eslint'
  },
  // rules 表示eslint校验规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

rules 配置规则格式

规则格式是<规则名称>: <告警级别>，告警级别分为三种:

  • “0"表示忽略问题，等同于"off”;
  • “1"表示给出警告，等同于"warn”;
  • “2"表示直接报错，等同于"error”。

更多的 ESLint 配置可以前往 ESLint 中文网 查看

③ gitignore

该文件正如其名字的意思，告知 git 那些文件或文件夹不需要添加到版本管理中。内容如下：

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

④ README.md

这个文件就是项目的介绍文件，使用 markdown 语法。

不清楚markdown语法的可以访问markdown基本语法

⑤ babel.config.js

Babel 是一个 JavaScript 编译器，可以对 JavaScript 文件进行转码，类似的有 ES6 转为 ES5 兼容不同的浏览器。

babel.config.js是 babel 的配置文件，presets字段设定转码规则，此处 @vue/cli-plugin-babel/preset就是规则。

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset']
}

了解更多的Babel相关配置可以访问Babel 配置文件

⑥ package.json

package.json文件提供了很多项目相关的信息，主要有这个项目所需要的各种模块；以及项目的配置信息（比如名称、版本、许可证等元数据）；还可以配置一些简化script执行脚本。项目中json文件是不能添加注释的，需要删除相关注释噢

{
  "name": "vue-project", // 项目的名称
  "version": "0.1.0", // 项目的版本号  大版本号.小版本号.修订版本号[.日期版本号]
  "private": true, // 是否对外开发，private为true表示不对外开放
  "scripts": {
    // script配置脚本对象，表示npm run XXX
    "serve": "vue-cli-service serve", // 配置serve脚本，表示npm run serve 等同于 vue-cli-service serve 命令
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    // 依赖的相关信息，这里主要是生产和开发依赖,一般用npm install XXX --save 安装的依赖就会添加到这里
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    // 开发依赖的相关信息，这里的主要是开发过程的依赖，生产环境中不会存在,一般用 npm install XXX --save-dev 安装的依赖会添加到这里
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

2. 额外的文件

除了上述vue-cli创建项目后默认生成的文件外，我们在开发过程中还需要很多配置文件，且都是在根目录中自己创建的。下面介绍几个相关文件

① vue.config.js

这个文件表示 vue 的配置文件，像一些简单的前端服务运行的端口号，是否自动打开，代理地址等。下面是一些简单的配置

const path = require('path') // 导入Node的path模块

// 解析函数，在配置引入别名时用到
function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js的主体配置
module.exports = {
  publicPath: '/', // 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致。
  outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  css: {
    // 对css的一些配置
    extract: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
    sourceMap: false // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
  },
  lintOnSave: process.env.NODE_ENV === 'development', // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
  devServer: {
    // 服务相关的设置
    host: '127.0.0.1', // 指定一个主机名
    port: 8000, // 指定一个端口号
    open: true, // 运行成功后是否自动打开页面
    proxy: {
      // 代理相关。如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
      '/api': {
        // 对请求接口中出现的api进行代理
        target: process.env.VUE_APP_PROXY_URL, // 代理的目标地址，这个取值在后面的文件会讲到
        changeOrigin: true, // 是否改变域名，
        ws: false, // 是否开启webSocket
        pathRewrite: {
          // 路径重写，如果默认不重写路径，那么`/api/users`会被代理到`target路径/api/users`
          '^/api': '' // 对api进行路径重写，重写后，那么`/api/users`会被代理到`target路径/users`
        }
      }
    }
  },
  // webpack相关的配置，可以设置plugins和别名解析等
  configureWebpack: {
    // 解析设置
    resolve: {
      // 别名配置，用来创建 import 或 require 的别名，来确保模块引入变得更简单。
      alias: {
        // 用'@'表示src的路径， @/views/Home.vue 等同于 src/views/Home.vue.
        '@': resolve('src'),
        // 同理，用@components 表示 src/components目录
        '@components': resolve('src/components'),
        '@assets': resolve('src/assets')
      }
    },
    // 配置webpack的plugins
    plugins: []
  },
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false
}

更多vue的配置可以访问 vue 配置参考

② .env.development、.env.production 配置文件

这里可以自己创建以上配置文件，用于配置不同环境下的环境变量，其中

  • .env.development表示开发环境的环境变量
  • .env.production表示生产环境的环境变量
  • .env.mock表示 mock 运行状态下的环境变量

这些环境变量可以在全局使用，使用方法就是process.env.XXXX。其中 xxxx 表示变量名

由于上面在vue.config.js配置文件中proxy代理配置的属性target的值使用了process.env.VUE_APP_PROXY_URL变量。所以我在env.development文件里定义如下变量：

VUE_APP_PROXY_ROOT = 'http://192.168.2.25:6060/'

于是在开发过程中，向 /api/user 地址发送请求就等同于向 http://192.168.2.25:6060/user 地址发送请求

③ .prettierrc文件

  • Prettier是一个代码格式化工具，可以在开发过程中，使代码格式化成你想要的风格和规范。

开发前端的过程中，我们要求开发人员都在VSCode中装入Prettier插件，方便格式化。与 ESLint 一样，为了统一代码风格和规范，所以 Prettier 也是在团队开发中重要的一员。

  • .prettierrc文件就是配置使用 Prettier 格式化代码的方式（注意该文件中的注释需要删除后才会生效）
{  "eslintIntegration": true, // eslint集成  "stylelintIntegration": true, // 样式嵌入  "singleQuote": true, // 是否使用单引号  "semi": false, // 结尾是否保留分号，设置为false表示结尾不会有分号  "trailingComma": "none", // 对象、数组等，最后一个是否保留逗号，设置为none表示不保留逗号， es5表示保留es5的结尾逗号  "arrowParens": "avoid", // 箭头函数中只有一个参数是否保留括号，aviod表示不保留括号，always表示保留括号  "bracketSpacing": true, // 对象中的空格 默认true  "useTabs": false, // 使用tab缩进，默认false  "tabWidth": 2 // tab缩进大小，2个空格}

更多prettier的配置内容请访问Prettier 配置

3. 更多的项目内容可以查看以下 github 地址

https://github.com/He-Huang/vue-project-structure

参考地址：

  1. vue 脚手架创建项目
  2. ESLint 配置文件 .eslintrc 示例及说明
  3. ESLint 中文网
  4. markdown基本语法
  5. Babel 配置文件
  6. vue 配置参考
  7. Prettier 配置
何以为皇
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-project:vue入门练手项目
04-29
app A Vue.js project 很久之前的入门项目，今天突然想起就稍微优化了一下下。很简单的几个页面，麻雀虽小但是五脏还是俱全，如果你是新手从第一次commit开始跟着做，一定没有问题。优化了axios和其他一些小地方，结构因为只有几个页面所有暂且没有动。如果错误，欢迎指正交流。没有用到vuex，有时间做下优化，增加vuex的使用。 技术栈 vue2 vue-router axios element-ui Build Setup # install dependencies npm install # serve with hot reload at localhost:4000 npm run dev # build for production with minification npm run build # build for production and view th
Vue项目的详细目录结构解析
ATCO[这里，只是顺手插曲]
09-19 2992
在创建项目时，如果你选择把依赖的配置信息以独立文件形式存放，那么你的项目内，和package.json文件同级的，就还会有比如.browserslistrc， .eslintrc， babel.config.js， jest.config.js， tsconfig.json等独立配置文件。而我们现在使用的Vue.js等框架开发的项目，并不能为浏览器所识别，所以就需要编译打包这一步操作，来转换成实际生产环境（浏览器）所需的文件。这个也没什么好说的，也就是罗列一下，之后Git上传时，需要忽略的文件。
Vue｜项目结构与执行过程介绍
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
07-24 3092
当执行了npm run serve 时，随后来到src目录找到main.js，引入vue，引入了App，接下来找到App.vue，发现里面用到了components下面的HelloWorld组件，对其进行执行，然后就到了index.html，通过容器进行渲染
vue 文件目录结构详解
11-26
项目简介 基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含： 基础库: vue.js、vue-router、vuex、whatwg-fetch 编译/打包工具：webpack、babel、node-sass 单元测试工具：karma、mocha、sinon-chai 本地服务器：express 目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │
vue项目总结之文件夹结构配置详解
08-28
主要给大家总结介绍了关于vue项目之文件夹结构配置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
vue-工程项目结构
早日成为鹏总
04-26 8213
components文件夹 用来存放Vue 组件。个人建议，把每一个组件中使用到的image图片放置到对应的组件子文件目录下，便于统一的管理 Node_modules/npm安装的该项目的依赖库 vuex/文件夹 存放的是和 Vuex store 相关的东西（state对象，actions，mutations) router/文件夹 存放的是跟vue-router相关的路由配置项 build/文件 是 webpack 的打包编译配置文件 static/文件夹 存放一.
Vue项目结构
zengxingyuluo的博客
01-01 4158
（1） Build：项目构建（webpack）相关代码，存放项目构建脚本 （2） config：配置目录，存放项目的一些基本配置信息，最常用的就是端口转发 （3） node_modules：npm加载的项目依赖模块，这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件 （4） src：这个目录下存放项目的源码，即开发者写的代码放在这里 这里包...
（Vue）项目结构解析
热门推荐
leilei__66的博客
07-13 1万+
（Vue）项目结构解析 前言 Vue-cli项目搭建——见Vue小白课（一）——CLI搭建项目（Vue2.x）或Vue+Node前后端项目搭建部分内容 参考文献： vue-cli入门（二）——项目结构 | 思否-Reachel Vue-cli创建vue项目以及配置文件梳理 | 思否-AshleyLv Vue系列之WebPack与Eslint | 充电实践 Vue项目结构一览 ├── build --------------------------------- 项目构建(webpack)相关配置文件，配
vue项目的结构分析与总结
qq_42252097的博客
11-23 2260
** 一、总结一下vue项目的总体结构以及vue项目常用的一些插件和一些项目技巧。 ** **         从现在做的几个vue项目上来看，总的来说，一次比一次有进步，项目的结构一次比一次更清晰和更有层次化。这当然是从很多的开源项目上学习到的，从中学习到他们在宏观上是怎样去策划项目的架构的，从微观上他们是如何去编...
C# + Vue 项目源码举例解析.docx
05-31
## 项目结构 该项目的结构如下： ``` Project │ README.md │ .gitignore │ └───Backend │ │ TaskManagementSystem.sln │ │ │ └───TaskManagementSystem │ │ appsettings.json │
Vue+webpack项目配置便于维护的目录结构教程详解
10-17
新建项目的时候创建合理的目录结构便于后期的维护是很重要。这篇文章主要介绍了Vue+webpack项目配置便于维护的目录结构 ,需要的朋友可以参考下
Vue项目结构及项目解读
weixin_43195498的博客
08-23 1084
简要介绍里如何使用@vue/cli创建vue项目，详细介绍了项目结构，并对项目进行了详细的解读。
vue项目结构及启动文件加载过程分析
小仙儿
02-27 3945
vue项目启动后文件加载过程 一、vue项目启动后文件加载过程 1、执行npm run dev 在执行npm run dev的时候，会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件，包含项目的名称版本、项目依赖等相关信息。启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。 ...
Vue项目总结（1）项目结构分析
yuxuan89814的专栏
04-07 453
会将recruit的内容放进去。无论将什么内容放进去，但是如下的app.vue的部分是公共的，变得只是路由里的内容。哪里控制访问一个路由，将什么内容放进路由视图视图容器呢？会将about的内容放进去。
Vue项目创建与项目结构解析
weixin_43576422的博客
11-02 1223
一、新建项目 前置条件： 打开命令行查看是否有需要的环境。 node环境：（若无则安装：npm install -g cnpm –registry=https://registry.npm.taobao.org） vue-cli:（若无则安装：npm install --global vue-cli） 切换到power shell： 新建一个放项目文件夹并进入： vue init webpack 项目名 说明： Vue build ==> 打包方式，回车即可； Install vue-rou
vue 隐藏占位符_vue结构了解
weixin_39867594的博客
01-26 1609
Vue 项目创建完成后，使用 Web Storm 打开项目，项目目录如下：build 文件夹，用来存放项目构建脚本config 中存放项目的一些基本配置信息，最常用的就是端口转发node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件src 这个目录下存放项目的源码，即开发者写的代码放在这里static 用来存放静态资源index.html 则是项目...
Vue.js（自定义指令）
最新发布
Luo3255069063的博客
04-18 419
【代码】Vue.js（自定义指令）
vue项目目录结构详解
06-10
Vue.js 是一个基于 MVVM 模式的前端框架，它提供了一些基础的目录结构，方便我们进行项目开发。下面是一个常见的 Vue 项目目录结构： ``` ├── build // 构建相关 ├── public // 静态资源 │ ├── favicon...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值