vue项目基础配置

vue总结笔记

1、vue文件目录分析

public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。

src文件夹（程序员代码文件夹）
assets： 存放公用的静态资源
components： 非路由组件（全局组件），其他组件放在views或者pages文件夹中
App.vue： 唯一的跟组件
main.js： 程序入口文件，最先执行的文件
babel.config.js: 配置文件（babel相关）
package.json: 项目的详细信息记录

脚手架下载下来的项目稍微配置一下

1、浏览器自动打开

在package.json文件中，加- -open,如下

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

2、关闭eslint校验工具

创建vue.config.js文件：需要对外暴露

module.exports = {
   lintOnSave:false,
}

3、 src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}