从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.