从0开始搭建基于VUE的前端项目(一) 项目创建和配置

准备与版本

1. 安装nodejs(v20.11.1)
2. 安装vue脚手架(@vue/cli 5.0.8) ,参考（https://cli.vuejs.org/zh/）
3. vue版本（2.7.16），vue2的最后一个版本
4. vue.config.js的配置详解(https://cli.vuejs.org/zh/config/)
5. element-ui(2.15.14)(https://element.eleme.io/)
6. vuex(3.6.2) (https://v3.vuex.vuejs.org/)

初始化项目

1. 创建一个git项目（可以去gitee/github上创建）,注意创建一个空项目
2. 创建项目

  vue create mvp-admin-vue-ui

3. 删除自己创建的git

rm -rf .git

4. 初始化git,并创建master分支

git init

5. 配置远程仓库地址

git remote add origin https://gitee.com/gzcltech/mvp-admin-vue-ui.git

6. 推送项目

git push -u origin main

环境

1. 参考（https://cli.vuejs.org/zh/guide/mode-and-env.html）
2. 在项目的根目录下面

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

3. 注意只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
4. 内部用了 dotenv（https://github.com/motdotla/dotenv#rules）

vue.config.js的配置

1. 关闭eslinit检查

lintOnSave: false

2. 别名

configureWebpack: {
 resolve: {
    alias: {
      '@': resolve('src')
    }
  },
}

项目目录结构

1. public
2. src目录下面
   main.js — 项目的入口文件
   App.vue – 根组建
   tests – 测试代码
   components – 组建
   assets – 静态资源
   store – vuex的store