跟着项目学Vue.js(三) 工程目录结构分析(上)

版权声明：本文为博主原创文章，未经博主允许不得转载。博客地址： https://blog.csdn.net/m0_37057454/article/details/82433224

 工程目录结构如下：

hello-world
|
|-- node_modules                     //模块文件夹，存放package.json中列出的依赖项
|-- public
|-- |-- favicon.ico                  //网站图标
|-- |-- index.html                   //入口页面
|-- src   
    |-- assets                       // 静态文件，比如一些图片，json数据等
|   |-- components                   // vue公共组件
    |-- views                        // 以页面为单位的vue文件、html文件等
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|   |-- router.js                    // vue的路由管理
|   |-- store.js                     // vuex
|-- tests                            // 单元测试
|-- package.json                     // 项目基本信息,包依赖信息等
|-- README.md                        // 项目说明
|-- 一些配置文件如.gitnore、yarn.lock等

对于初学者来说，根目录下的README.md文件和package.json文件是比较重要的。

1、README.md

如果你有项目的源码，却不知道怎么运行这个项目，先不要慌着去百度，而是要找一找工程里有没有README.md文件。。。

打开README.md，发现里面是安装包、启动开发服务，打包，和格式化代码等命令运行项目的所有命令。

# hello-world

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Lints and fixes files
```
yarn run lint
```

### Run your end-to-end tests
```
yarn run test:e2e# hello-world

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Lints and fixes files
```
yarn run lint
```

### Run your end-to-end tests
```
yarn run test:e2e
```

在文件里，我们找到启动开发服务的命令yarn run serve

### Compiles and hot-reloads for development
```
yarn run serve
```

打开cmd，输入 yarn run serve，启动成功。

D:\vuestore\hello-world>yarn run serve
yarn run v1.9.4
warning ..\package.json: No license field
$ vue-cli-service serve
 INFO  Starting development server...
                                                                           1                                  98% after emitting CopyPlugin


 DONE  Compiled successfully in 16505ms                                                                         08:30:26

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.28.1:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

 

2、package.json文件

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-e2e-nightwatch": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-airbnb": "^3.0.1",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17"
  }
}

1)scripts节点：

npm 允许在package.json文件里面，使用scripts字段定义脚本命令，这是初始的内容。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e"
  },

vue 模仿 react-scripts 搞出了个 vue-cli-service ，上面4个子节点分别对应启动开发服务，打包，格式化代码 ，测试

我们刚才启动开发服务的命令就是在这个子节点定义的，

"serve": "vue-cli-service serve",

如果如果项目组有规定，所有SPA项目启动开发服务的命令都统一用start，那我们就要改一下这个子节点的key：serve => start

  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e"
  },

打开cmd，输入 yarn run serve，出现找不到命令的error。

D:\vuestore\hello-world>yarn run serve
yarn run v1.7.0
error Command "serve" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

证明配置已经起了效果，输入yarn run start，启动成功。

D:\vuestore\hello-world>yarn run start
yarn run v1.7.0
$ vue-cli-service serve
 INFO  Starting development server...
 10% bu 10% bu 1 1 11% bu 1 11% bu 11% bu 13% bu 13% 13 24 98% after emitting CopyPlugin


 DONE  Compiled successfully in 2901ms                                                                          10:44:08

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

2)dependencies与devDependencies

dependencies：正常运行时所需要的依赖项

"dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }

devDependencies：开发时用的依赖项，它们不会被部署到生产环境，多是一些编译css、测试、服务等针对IDE或脚手架的插件。

"devDependencies": {
    "@vue/cli-plugin-e2e-nightwatch": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-airbnb": "^3.0.1",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17"
  }

在安装node模块时，有两种命令参数可以把它们的信息写入package.json文件：

–save
–save-dev

–save会把依赖包名称添加到package.json文件dependencies键下，

–save-dev则添加到package.json文件devDependencies键下

如果直接使用yarn add packagename，不用上面的后缀，会咋样呢？

这里添加移动端 UI 组件库VUX来测试一下，输入yarn add vux

D:\vuestore\hello-world>yarn add vux
yarn add v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...

 执行成功后，dependencies键下多了子节点vux，而devDependencies键无变动。即默认只会添加在dependencies节点下。

  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vux": "^2.9.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-e2e-nightwatch": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-airbnb": "^3.0.1",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17"
  }