vue-cli工程化脚手架搭建后的目录及项目运行注意事项（中）

进入创建的文件夹中会看到如上目录 

• public：不需要去改动现有的文件，里面存放的是浏览器访问的入口文件（index.html）

src（后期很多操作都在这个目录中完成）

• main.js：项目/程序入口文件 （该文件中JavaScript代码都会被执行）

• App.vue：根组件（万物之根）

• components：存放自定义的功能组件（涉及到业务逻辑）

• assets：静态资源目录（图片、视频、音频等就是静态资源），这里面的静态资源浏览器是无法直接访问的，而是给组件通过模块化的方式导入进组件使用的。

• • 项目中的静态资源有2个地方可以放

    • public：供在public/index.html中直接引入（link标签、script标签）的

    • src/assets：供单文件组件导入时需要的静态资源文件（import ...）

• views：存放视图组件的（只是涉及到页面的布局排版）

小技巧：可以被复用的就算它功能组件，不能被复用的就算它是视图组件。

补充：（readme.md文件中的内容）后续入职的时候项目给到的代码可能不不包含node_modules目录，需要自己执行npm i，随后项目才完整。

项目的运行及注意事项

 

1.项目的启停

 在创建项目完成后有提示我们后续的操作：

• 在命令行中进入项目目录

• 运行npm run serve命令来启动项目

 注意：默认端口号会从8080开始，如果再次启动其他项目后续会以8081、8082……进行监听。

如果需要停止正在运行的项目，可以选择以下两种方式任一：

• 关闭终端

• 在终端中按下组合键Ctrl + C（Cancel），随后选择Y并键入回车（如下图）

• 也可以按下两次Ctrl + C

 

在启动vue项目的时候可能会出现卡在“40%”的进度并且长时间不动，如果这样，则直接Ctrl + C停止本次启动，重新再去尝试启动。

关于项目运行时，如果修改了项目代码是否需要重启的说明：

是否需要重启取决于我们修改了什么内容，如果只是修改了代码部分（js、css、vue文件等）是不需要开发者手动重启项目的，系统会自动重新编译（有点nodemon感觉）；但是如果修改的是配置文件，则必须需要自己先去停止项目，然后再去启动项目（手动实现重启）。

2.关于ESlint

ESlint用于规范项目的编码，大型项目一般多人开发，为了避免一些个人编程恶习坑自己坑别人，项目中使用了ESlint会起到紧箍咒的作用，强制开发人员注意代码规范。例如，在不使用ESlint的情况下，JS允许我们声明一个不变量但不使用。如果使用了ESlint，在上述情况下会报错如下：

关于ESlint的报错，有一份错误参照，可以访问以下地址查看：检测并修复 JavaScript 代码中的问题。 - ESLint - 插件化的 JavaScript 代码检查工具

实际使用中可以通过npm run lint来解决eslint所爆出的大部分错误（例如：分号、引号、空格、多余换行等等），但是涉及到代码多余或者缺少表达式之类的错误需要开发者自己解决的。