Vue入门之项目结构介绍_html-js-css

系列文章目录

第一章 Vue 入门之搭建vue脚手架
第二章 Vue入门之项目结构介绍
第三章 Vue入门之基本语法
第四章 Vue入门之企业站点开发实践
第五章 Vue入门之前端部署

文章目录系列文章目录前言一、项目结构babel.config.jsjsconfig.jsonpackage-lock.jsonpackage.json.gitignorevue.config.jsnode_modulespublicsrcassetscomponentroutertoolviewsmain.jsapp.vue dist 二、基本使用Project setupCompiles and hot-reloads for developmentCompiles and minifies for productionLints and fixes files 总结

前言

vue现在是比较流行的前端框架，花一些时间学习下，特将学习过程分享出来，供大家一起学习。

一、项目结构

babel.config.js Babel是一个JS编译器，主要作用是将ECMAScript 2015+ 版本的代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其它环境中。Vue项目中普遍使用ES6语法，若要求兼容低版本浏览器，就需要引入Babel，将ES6转换为ES5。Vue项目根目录中存在babel.config.js文件，即为Babel的配置文件，作用于整个项目。（babel 转码器的配置文件）

具体用法暂时不多赘述，详情请参考Babel中文文档：

https://www.babeljs.cn/

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

module.exports = {
    presets: [
      '@vue/app'
    ]
}

jsconfig.json

主要用来配置一个默认根路径，可以通过该根路径快速访问到子路径，如下配置中 @ 就代表src根路径。

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

package-lock.json

简单理解就是锁定dependencies的版本号。
一般来说前端的项目都有一个package.json文件管理依赖的版本号，在package.json文件里我们可以看到依赖的版本号前面有^和~这些符号。

^：锁定大版本号，比如是^6.2.2，会匹配所有6.x.x的版本，更新的时候会下载最新的版本号
~：锁定前面两个版本号，比如是^6.2.2，会匹配所有6.2.x的版本，更新的时候会下载最新的版本号
*：安装最新的版本号。
不同的下载时间、npm下载源不一样或者不同机器，下载得到的nodejs依赖包有可能不一样。所以package-lock.json的作用就是固定当前的版本，确保你安装的包不会因为在新的机器上或者新的下载源下载依赖包时不一致，这在开发、部署或者多人协作时会减少很多不必要的麻烦。

需要去更新依赖包的版本时，可以通过执行npm install xxx@x.x.x实现，package-lock.json也会随之更新。

一般来说新建的项目是没有package-lock.json这个文件，执行npm install时候它会自动生成。

package.json

定义了项目的所有依赖，包括开发时依赖和发布时依赖（比如 vuex，element-UI）

.gitignore

git 忽略文件，不上传的文件配置在这里。

vue.config.js

vue 的配置文件，可以实现的功能如关闭selint校验，配置代理。

module.exports = {
    // 关闭eslint
    lintOnSave:false,
    // 代理跨域
    devServer: {
        proxy: {
          '/api': {
            target: 'http://39.98.123.211',
            // pathRewrite: { '^/api': '' },
          },
        },
      },
}