Vue开发之项目创建

时间：2024-01-24 10:02:15

1.编辑器配置

习惯使用VScode进行开发时，可以安装EditorConfig for Visual Studio Code插件，然后在项目中新建.editorconfig文件，来配置编辑器的使用习惯

.editorconfig文件内容

root = true                             # 是否是*配置文件，设置为true的时候才会停止搜索.editorconfig文件
[*]                                     # 匹配除/之外的任意字符，表示对所有的文件都使用下面的配置
charset=utf-8                           # 使用UTF-8编码
indent_style = tabs                     # 缩进方式为Tab键
indent_size = 4                         # 缩进大小为4个空格
trim_trailing_whitespace = true         # 让文件以空行结束
insert_final_newline = true             # 删除行尾空格

具体配置可以参考editorconfig官网

2.开发时通用的项目目录

.
├── babel.config.js                 # babel配置文件
├── package.json                    # 定义项目的一些描述，比如项目名，版本，项目依赖包以及开发依赖包
├── package-lock.json
├── eslintrc.js                     # eslint规则配置文件，比如想自定义一些规则时，则在此文件的rules字段中定义
├── vue.config.js                   # vue的配置文件
├── .editorconfig                   # 配置编辑器的使用习惯
├── postcss.config.js               # CSS自动补充一些兼容性代码的配置
├── public                          # 公共文件存放目录
│   ├── favicon.ico                 # 在浏览器上看到的小图标
│   └── index.html                  # 模板文件，webpack在运行和打包时用这个文件来生成项目最后的index.html
├── README.md
├── src                             # 项目的主文件，平时都是在这个文件夹下进行开发
│   ├── api                         # 接口目录，发送js请求的接口都可以保存在这个目录下
│   ├── App.vue                     # 基础组件
│   ├── assets                      # 项目静态资源存放目录，比如图片，图标，字体等都放在这个目录下
│   │   ├── font
│   │   ├── img
│   │   └── logo.png
│   ├── components                  # 组件存放目录，把代码中一些可以复用的逻辑抽离出来保存在这个目录下
│   │   └── HelloWorld.vue
│   ├── config                      # 项目的配置文件存放目录
│   │   └── index.js
│   ├── directive                   # Vue自定义的指令
│   │   └── index.js
│   ├── lib                         # 存放一些通用的工具和方法
│   │   ├── tools.js                # 存放与业务有关系的方法
│   │   └── util.js                 # 存放与业务无关的工具方法
│   ├── main.js
│   ├── mock                        # 模拟接口的数据
│   │   └── index.js
│   ├── router                      # 存放所有的路由，包括一些复杂的路由拦截方法
│   │   ├── index.js
│   │   └── router.js
│   ├── store
│   │   ├── actions.js
│   │   ├── index.js
│   │   ├── module
│   │   │   └── user.js
│   │   ├── mutations.js
│   │   └── state.js
│   └── views                       # 视图文件存放目录，项目开发中的页面都保存在这个文件夹下
│       ├── About.vue
│       └── Home.vue
└── vue.config.js

3.vue.config.js中的一些配置

const path = require(\'path\')
const resolve = dir => path.join(__dirname,dir)
const BASE_URL = process.env.NODE_ENV === \'production\' ? \'/iview-admin\':\'/\'

module.exports = {
    lintOnSave: false,
    baseUrl: BASE_URL,
    chainWebpack:config =>{
        config.resolve.alias
        .set(\'@\',resolve(\'src\'))    // 用 @ 符号来替代 src 这个路径
        .set(\'_c\',resolve(\'src/components\'))        // 用 _c 来替代 src/components这个目录
    },
    productionSourceMap:false,       // 打包时不生成 .map文件，减少打包的体积同时加快打包速度
    devServer:{         // 跨域配置，告诉开发服务器将任何没有匹配到静态文件的请求都代理到proxy指定的URL
        proxy:\'http://localhost:8000\'
    }
}

相关文章