二、Vue2.0项目结构内容及配置解析

杨扬树

已于 2023-02-01 17:43:42 修改

阅读量2.6k

点赞数 4

分类专栏： vue2.0 文章标签： javascript vue.js webpack

于 2023-01-13 16:43:49 首次发布

本文链接：https://blog.csdn.net/qq_23135259/article/details/128676404

版权

vue2.0 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

1、node_modules文件夹：用于执行程序的各种依赖

2、Public文件夹，静态资源，里面的东西，打包会原封不动的打包进去

3、src

assets文件夹：公用的静态资源，webpack会打包到js文件夹

componets文件夹：非路由组件，公用的组件。Webpack打包到js文件夹

App.vue：是唯一的根组件

4、main.js：是程序的入口组件，程序运行最先执行

vue 中的import导入过程解析：

1、如果import路径中没有前导 ./ ../ / ,加载数据将从核心模块或者node_modules模块加载

2、如果路径中有前导 ./ ../ / ,加载数据将从指定路径加载。

main.js 详细解释

5、.gitignore 文件：

通知Git哪些文件不需要添加到版本管理中，即本地修改完项目后，上传到github等版本管理服务中，本地哪些文件不上传过去。此文件一般不用修改

6、babel.config.js ：

确保 JavaScript 代码兼容所有的浏览器，Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的 JavaScript 代码。

7、package.json ：

描述项目及其依赖的信息（更新模块时锁定模块的大版本号，版本号的第一位，不能锁定后面的小版本）

8、 package-lock.json ：

描述项目及其依赖的信息（依赖记录详细的版本号，名称，依赖之类的信息），当执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。

9、README.md ：

对项目的主要信息进行描述，如果一个项目你很长时间都没有动,突然你需要修改这个项目,那么通过README.md中对项目的描述能让你快速的再次上手。

10、项目其他配置说明：

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文件夹的别名，（定义别名后，引入该路径文件时，可以通过引入别名代替，更加方便）

定义别名：在vue.config.js 中定义别名：

const path = require('path')
const resolve = (dir) => {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: false,//关闭eslint自动校验功能
    //别名设置，方式一
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))  //本项目路径src路径设置别名为@
            .set('_conf', resolve('src/config')) //本项目路径src/config路径设置别名为_conf
            .set('_iconfont', resolve('src/assets/icons/iconfont'))
            .set('_css', resolve('src/assets/css'))
            .set('_img', resolve('src/assets/img'))
            .set('_components', resolve('src/components'))
            .set('_header', 'src/Header')
            .set('_footer', 'src/Footer')
            .set('$$', path.resolve(__dirname, '../static/')) //项目根路径同级static目录设置别名为$$
            .set('$@', path.resolve(__dirname, '../static/src/')) //项目根路径同级static/src目录设置别名为$@
    },
    // //别名设置，方式二
    // configureWebpack: {
    //     resolve: {
    //         alias: {
    //             '@': resolve('src'), //本项目路径src路径设置别名为@
    //             'assets': resolve('src/assets'), //本项目路径src/assets路径设置别名为assets，静态文件前要加~，否则只会以当前目录为基准
    //             '$$': path.resolve(__dirname, '../static/'), //项目根路径同级static目录设置别名为$$
    //             '$@': path.resolve(__dirname, '../static/src/') //项目根路径同级static/src目录设置别名为$@
    //         }
    //     }
    // },
}

使用定义的别名：

1、例如，引入src/assets/css/global.css 文件，由于已经定义了src/assets/css/ 的别名为_css, 可以直接这么引用：import "_css/global.css";

2、对于引入静态图片时，要注意在别名前面加 ~ 才可以引入正确。

例如：想引用 src/assets/img/foot-info-icon-web.png 这个图片，在已定义src/assets/img别名为_img 后，

正确写法：<img src="~_img/foot-info-icon-web.png" />

错误的写法：<img src="_img/foot-info-icon-web.png" />