從0搭建一個Vue3項目
近期想把自己的知識串起來，想了又想，沒有什么比從0搭建一個項目更能考驗一個人的基礎知識。從生成腳手架，打包，編譯，到部署上線。記錄下自己遇到的坑以及解決過程。
環境搭建
- 運行環境
node.js
PS E:\makedowm> node -v
v14.18.0
- Vue CLI
Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了功能齊備的構建設置。只需要幾分鍾的時間就可以運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本
PS E:\makedowm> npm install -g @vue/cli
success Installed "@vue/cli@4.5.15" with binaries:
- vue
Done in 91.84s.
安裝完成后，進行項目初始化。一開始就報一個錯
npm ERR! code EEXIST
npm ERR! path C:\Users\Getech-200107-1\AppData\Roaming\npm\vue.cmd
npm ERR! EEXIST: file already exists
npm ERR! File exists: C:\Users\Getech-200107-1\AppData\Roaming\npm\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Getech-200107-1\AppData\Local\npm-cache\_logs\2021-11-05T03_15_37_291Z-debug.log
看報錯信息知道了是因為我之前裝過。刪除掉這個文件在重試：
PS E:\DDD\Vue3CLI> npm install -g @vue/cli
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
PS E:\DDD\Vue3CLI> npm install -g @vue/cli
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
PS E:\DDD\Vue3CLI> npm install -g @vue/cli
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated graphql-extensions@0.15.0: The API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
added 944 packages in 60s
9 packages are looking for funding
run `npm fund` for details
PS E:\DDD\Vue3CLI> vue --version
@vue/cli 4.5.15
終於成功了。下面開始創建項目
PS E:\DDD\Vue3CLI> vue create stones-vue3
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? No
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
Vue CLI v4.5.15
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn
Vue CLI v4.5.15
✨ Creating project in E:\DDD\Vue3CLI\stones-vue3.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.11
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
success Saved lockfile.
Done in 93.99s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
⚓ Running completion hooks...
📄 Generating README.md...
$ cd stones-vue3
$ yarn serve
PS E:\DDD\Vue3CLI> ganization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
https://github.com/sideway/joi/issues/2411 : 無法將“https://github.com/sideway/joi/issues/2411”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。請
檢查名稱的拼寫，如果包括路徑，請確保路徑正確，然后再試一次。
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (https://github....joi/issues/2411:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
PS E:\DDD\Vue3CLI> npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will
no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
Unknown command: "WARN"
To see a list of supported npm commands, run:
npm help
PS E:\DDD\Vue3CLI>
PS E:\DDD\Vue3CLI> added 944 packages in 60s
added : 無法將“added”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，如果包括路徑，請確保路徑正確，然后再試一次。
所在位置 行:1 字符: 1
+ added 944 packages in 60s
+ ~~~~~
+ CategoryInfo : ObjectNotFound: (added:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
PS E:\DDD\Vue3CLI>
PS E:\DDD\Vue3CLI> 9 packages are looking for funding
所在位置 行:1 字符: 3
+ 9 packages are looking for funding
+ ~~~~~~~~
表達式或語句中包含意外的標記“packages”。
+ CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException
+ FullyQualifiedErrorId : UnexpectedToken
莫名奇妙又報了一堆錯誤，太難了。看后面應該是項目生成成功了，自己運行了yarn serve，然后報錯了。我進入到項目中看下
package.json文件如下
{
"name": "stones-vue3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
發現安裝的vue居然是2.6.11版本的。看下哪里的問題。
如何安裝vue3版本的包
在vue.js官網發現安裝cli后還有一個升級命令。執行看下
PS E:\DDD\Vue3CLI\stones-vue3> vue upgrade --next
...
success Saved lockfile.
Done in 62.62s.
✔ Successfully invoked migrator for plugin: @vue/cli-plugin-eslint
eslint ESLint upgraded from v6. to v7
DONE All plugins are up to date!
升級完成了，在回退到上級目錄重新創建一個項目看下
PS E:\DDD\Vue3CLI> vue create stones3
Vue CLI v4.5.15
? Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features
果然、可以選擇vue3項目創建。
新建項目的package.json文件如下：
{
"name": "stones3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
是vue3。來運行一下
DONE Compiled successfully in 14667ms 上午11:53:17
App running at:
- Local: http://localhost:8080/
- Network: http://10.88.40.48:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
可以是可以成功。發現不是ts，而且版本是3.0.0。看下怎么升級到穩定版本， 去官網看了文檔、操作是沒有問題的，發現自己創建模板的時候好像沒有特別多的選擇，所以排查了選項。發現自己是選了默認的vue3模板。
# 配置如下
? Please pick a preset: Manually select features # 手動配置
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter # 選擇需要的vue全家桶
? Choose a version of Vue.js that you want to start the project with 3.x # 選擇vue3
? Use class-style component syntax? Yes # 支持class
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes # 支持jsx
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # history模式的路由
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less # less作為樣式預處理
? Pick a linter / formatter config: Prettier # eslint 配置
? Pick additional lint features: Lint on save # 保存時進行eslint校驗
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) # 獨立生成配置文件
> In dedicated config files
In package.json
選擇手動從頭到尾配置如上。項目生成完成。
但是很多包都不是最新的。這個時候才需要執行升級指令
PS E:\DDD\Vue3CLI\stones6> vue upgrade --next
升級完成。運行一下。創建一個項目完成了。
App running at:
- Local: http://localhost:8080/
- Network: http://10.88.40.48:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
No issues found.