vue项目搭建流程

通过一段时间的学习，对创建vue项目的几种方式做了个简单的总结，方便以后在使用时也可以参考。

vite搭建 --v4.2.1

npm create vite@latest vuevite -- --vue
选择vue和语言(js/ts)
cd vuevite
npm install
npm run dev
package.json 文件配置如下：

    "dependencies": {
        "vue": "^3.2.47"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.1.0",
        "vite": "^4.2.0"
    }

使用 create-vue 来创建基于 Vite 的新项目

npm init vue@latest // 将会安装并执行 create-vue,将会安装并执行 create-vue
输入项目名称，选择配置项
cd vue-demo
npm install
npm run format
npm run dev
package.json 文件配置如下：

    "dependencies": {
        "pinia": "^2.0.32",
        "vue": "^3.2.47",
        "vue-router": "^4.1.6"
    },
    "devDependencies": {
        "@rushstack/eslint-patch": "^1.2.0",
        "@vitejs/plugin-vue": "^4.0.0",
        "@vue/eslint-config-prettier": "^7.1.0",
        "@vue/test-utils": "^2.3.0",
        "eslint": "^8.34.0",
        "eslint-plugin-vue": "^9.9.0",
        "jsdom": "^21.1.0",
        "prettier": "^2.8.4",
        "vite": "^4.1.4",
        "vitest": "^0.29.1"
    }

使用vue-cli创建项目

npm install -g @vue/cli // 先全局安装cli后才可以使用vue create去创建项目
TIP: 如果npm下载慢，可使用临时的cnpm，只需在模块后添加 --registry https://registry.npm.taobao.org即可
vue create vue-cli-demo
选择vue版本
cd vue-cli-demo
npm run serve
package.json 文件配置如下：

 "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },