项目运行

在文件夹中找到创建的vue-cli项目

我们在创建项目时命令行地址对应的是C:\Users\User因此我们去 C:\Users\User文件夹下面找到对应创建的项目即可，不同电脑对应的命令行地址不同这个就在不在赘述了。

找到项目将项目拖动到对应的编译器中 Vscode Webstorm Hbuilder 等都可以。

项目结构

如上图我们已经将创建的项目拖动到了 webstorm 编译器中此时我们先将项目运行起来

打开 webstorm 或其他编译器的终端(Terminal) VScode使用快捷键：ctrl + · 即可；注意那个点是键盘上 esc 下面的那个；

webstorm使用快捷键 alt+f12 即可；

打开终端后在终端中运行命令

由于我们是使用vue-cli4创建项目的,在创建项目的时候已经进行了各依赖包的安装因此我们这里不需要输入命令 npm install

npm run serve

运行完成后我这边出现了 node-sass环境适配问题也一并说一下这个问题吧

node-sass install failed.png

这里报错信息的意思是 node-sass找不到当前环境的绑定

在报错信息中建议我们重新安装node-sass 以达到适配。那我们就执行重装命令。

npm rebuild node-sass
//然后重新执行运行命令
npm run serve

run success.png

在终端看到这个结果表示项目运行成功在浏览器中输入 http：//localhost:8080即可运行看到页面。你也可以直接点击终端中的链接自动打开网址到浏览器

项目目录结构

node_modules文件夹

首先说下node-modules 这里面就是创建项目初始化的依赖包安装的位置就是上篇文章配置完成后项目创建时自己下载的有关依赖包。

之后我们自己安装的一些常用的包时也是存放在此处。

public文件夹

public文件夹是一个静态资源文件夹里面的index.html 即是项目最终形成的一个主index文件打包完成后的代码都会被引入到index.html这个文件中

public folder.png

上面的图有部分问题那个id为app的div应该是包裹住了那个被注释掉的文字。打包后的文件最终被引入到id为app的div中

值得注意的是 public 文件夹中的文件在项目打包时并不会被打包。因此在存放有关字体图片样式等文件时是不建议将文件放在public文件夹的下。

src文件夹

src文件夹是我们开发时经常使用的文件，项目百分之90的代码都会被写入到src下面接下来我们逐步分析src下的这些文件

assets文件夹

assets文件夹一般用于存放静态资源以及一些公共的js代码可以存放api 各类工具js文件等。

components文件夹

components文件夹顾名思义用于存放组件的文件夹。将组件分类存放到该文件夹下方便管理

router 文件夹

router文件夹本来是没有的之所以出现了是因为我们当时在创建基础项目时选用了 router这个路由管理器

router文件夹下面的index.js文件是一个VueRouter 的配置文件

router-index.html.png

首先引入Vue和vueRouter 然后将 vueRouter挂载到Vue中然后定义路由的的路径列表实例化一个路由进行配置可以看到这里的mode 配置即上篇文章我们提到

的路由模式 hash 和history 上篇文章我们选择是history模式配置好之后暴露实例化的路由出去。然后在入口文件(main.js)中进行一次挂载

store文件夹

store文件夹本来也是没有的之所以出现了是因为我们当时在创建基础项目时选用了 Vuex(状态管理器)

store文件夹下面的index.js文件是Vuex的配置文件

也是首先引入Vue和Vuex 然后将 Vuex挂载到Vue中然后实例化一个Store 暴露出去。

这些只是 Vuex最基本的配置。

views文件夹

该文件夹主要存放的是页面信息。存放一些主页面。

App.vue文件

该文件是一个根组件该组件可以理解为所有子页面的父页面主要用于路由的跳转

main.js 文件

作为项目的入口文件是十分的重要的

项目运行开始时其第一个加载执行的文件就是main.js

main.js.png

首先引入 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

该文件是 eslint语法规则的配置文件具体不多讲相关语法参考eslint官网即可

.gitignore

该文件时 git提交时忽略提交的配置文件可在该文件中配置相关不需要提交的文件夹如 /node_modules/

bable.config.js

该文件是bable转译配置文件

在实际开发中我们经常会用到各种通用包或者一些组件库有时候该包的代码不支持低版本的浏览器而此时我们又想在低版本中兼容这些组件包。 bable.config.js

能够很好的帮我们解决这个问题

packge.json

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

readme.md

markdown 类型的文件用于描述项目。

End

感谢您观看此篇博客，本人技术有限若有不足之处还望各位大佬们指出。