vue-cli 脚手架初始化项目/文件夹的解释及其他配置

1. vue-cli 脚手架初始化项目

node + webpack + cnpm(淘宝镜像)/yarn

1.1 node_modules文件夹：整个项目的依赖文件夹

1.2 public文件夹： 一般放置静态资源(图片)，注意：放在public文件夹中的静态资源，webpack在进行打包的时候，会原封不动的打包到dist文件夹中。

1.3 src 文件夹：程序员源代码文件夹(所有的页面及逻辑处理都在这)

1.4 src文件夹中的：

1.4.1 assets文件夹：一般也是放置静态资源的(一般用来放置多个组件公用的静态资源)，注意：放置在assets中的静态资源，在webpack打包的时候会，webpack会把静态资源当做一个模块，打包进js文件。

1.4.2 components文件夹：一般放置的都是非路由组件，或全局组件。例(封装的分页模块，拖拽模块…)

1.4.3 App.vue: 唯一的根组件，vue当中的组件(.vue)

1.4.4 main.js: 程序的入口文件，也是整个项目中最先执行的文件

1.4.5 babel.config.js: 配置文件(babel相关的)

1.4.6 package.json文件：记录的信息，例：安装的axios element-ui 等等

1.4.7 README.md： 说明文件，项目怎么启动，怎么打包 …

2. 项目中的其他配置：

​
2.1 项目运行时自动打开浏览器：

在package.json中：

 "scripts": {    "serve": "vue-cli-service serve --open",    "build": "vue-cli-service build"  },：   "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build"  }

2.2 eslint校验功能的关闭：

— 在根目录下，创建一个vue.config.js

在这里插入代码片

2.3 src文件夹简写的方法，配置别名：@ 这样在以后文件过多的情况下，直接@/需要引入的文件夹就OK啦！系不系很方便！！！

—同样在根目录下创建一个：jsconfig.json 文件

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

​

麦克风网