「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。
项目运行
在文件夹中找到创建的vue-cli项目
我们在创建项目时 命令行地址对应的是C:\Users\User 在这个文件夹下面找到之前创建的项目，不同电脑对应的命令行地址不同，这个就在不在赘述了。
将项目拖动到对应的编译器 中 Vscode Webstorm 等都可以。
如上图 我们已经将创建的项目 拖动到了 webstorm 编译器中 然后将项目运行起来
打开 webstorm 或其他编译器的终端(Terminal)
- VScode使用快捷键：
ctrl + · - webstorm使用快捷键
alt+f12
打开终端后 在终端中运行命令
注意:在创建项目的时候脚手架已经对各依赖包的安装，所以不需要再去执行npm install的命令
// 终端输入
npm run serve
运行之后 我的项目出现了node-sass环境适配问题 也一并说一下这个问题吧
这里的报错信息是说node-sass找不到当前环境的绑定
在报错信息中建议我们重新安装node-sass以达到适配。那我们就执行重装命令。
npm rebuild node-sass
//然后重新执行运行命令
npm run serve
在终端看到这个结果表示项目运行成功 在浏览器中输入 http://localhost:8080即可运行看到页面。你也可以直接点击终端中的链接 自动打开网址到浏览器
项目目录结构
node_modules文件夹
首先说下node-modules 这里面存放的是package.json中下载的依赖包 就是上篇文章配置完成后项目创建时自己下载的有关依赖包。
之后我们自己安装的一些常用的包时 也是存放在此处。
public文件夹
public文件夹是一个静态资源文件夹 里面的index.html 即是项目最终形成的一个主index文件 打包完成后的代码 都会被引入到index.html这个文件中
上面的图有部分问题 那个id为app的div应该是包裹住了那个被注释掉的文字。打包后的文件最终被引入到id为app的div中
值得注意的是 public 文件夹中的文件 在项目打包时 并不会被压缩。因此存放有关字体、图片、样式等文件时, 不建议放在public文件夹下。
src文件夹
src文件夹是我们开发时经常使用的文件夹，项目百分之90的代码都会被写入到src下面 接下来我们逐步分析src下的这些文件
assets文件夹
assets文件夹 一般用于存放静态资源以及一些公共的js代码 可以存放api 各类工具js文件等。
components文件夹
components文件夹 顾名思义 用于存放组件的文件夹。将组件分类存放到该文件夹下方便管理
router 文件夹
该文件夹本来是没有的。之所以出现是因为我们当时在创建基础项目时 选用了vue-router这个路由管理器
router文件夹下面的index.js文件是一个vue-router的配置文件
首先引入Vue和vueRouter 然后将 vueRouter挂载到Vue中 然后定义路由的的路径列表 实例化一个路由进行配置 可以看到 这里的mode配置即上篇文章我们提到的路由模式 hash 和history
上篇文章我们选择是history模式 配置好之后 暴露实例化的路由出去。 然后在入口文件(main.js)中 进行一次挂载
store文件夹
store文件夹本来也是没有的 之所以出现是因为我们当时在创建基础项目时 选用了 Vuex(状态管理器)
store文件夹下面的index.js文件是Vuex的配置文件
也是首先引入Vue和Vuex 然后将 Vuex挂载到Vue中 然后实例化一个Store 暴露出去。
这些只是 Vuex最基本的配置。
views文件夹
该文件夹主要存放的是页面信息。项目中的一些偏向页面的vue文件都可以存放到这个文件夹中。
App.vue文件
该文件是一个根组件 该组件可以理解为 所有子页面的父页面 主要用于路由的跳转
main.js 文件
作为项目的入口文件，是十分的重要的。项目运行开始时，其第一个加载执行的文件就是main.js。
首先引入 Vue app.vue文件 路由配置文件 状态管理配置文件 。然后实例化一个vue 的构造函数 将路由，状态管理等配置文件传入到Vue构造函数 然后由Vue实例进行初始化以及 加载配置 在日常开发中 对于mainjs 我们多半都是引入大量的外部组件以及外部组件样式在此文件中。 并且也会配置一些全局vue变量。
其他文件
.browserslistrc.js
上篇文章我们有提到 一个选项 where do you prefer placing config for Bable Eslint etc
我们选择将bable eslint 等作为单独的文件生成 而不是选择放到package.json中
因此 .browserslistrc 文件出现了
.browserslistrc（运行时浏览器配置控制文件）功能是在前端工具之间共享目标环境的浏览器信息。为了更方便的配置不同工具之间对浏览器特性支持的配置
// 全球超过1%人使用的浏览器
> 1%
// 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
last 2 versions
//在最新的两个版本中发现其市场份额不低于 0.5% 并且 在24 个月内官方支持和更新了。
not dead
还有一些其他的配置可以参考gitHub文档
.editorconfig.js
该文件是方便代码之间的管理 和eslint有异曲同工之妙
EditorConfig能帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而.editorconfig正是它的默认配置文件。
.eslintrc.js
.eslintrc.js文件是eslint语法规则的配置文件 具体不多讲 相关语法可参考eslint官网
.gitignore(git忽略提交配置文件)
git提交时忽略提交的配置文件。可在该文件中配置git提交时不需要push的文件或者文件夹 如 /node_modules/
bable.config.js(bable转译配置文件)
在实际开发中 我们经常会用到各种通用包和组件库。有时候该包的代码不支持低版本的浏览器 而此时我们又想在低版本中兼容这些组件包。 bable.config.js 能够很好的帮我们解决这个问题 可以配置转译文件的规则。
packge.json
package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。
readme.md
markdown 类型的文件用于描述项目 。
最后
文章若有不足之处，还请大家批评指出。
感谢您观看此篇文章 希望能给个👍评论收藏三连！你的点赞就是我写作的动力。
