1，Vue位置
浏览器内核分为两个部分：
渲染引擎，用于 渲染HTML和CSS；
JavaScript引擎，用于运行JavaScript，Chrome使用的JavaScript引擎为V8。
Node.js是一个基于Chrome V8引擎的JavaScript运行环境。
Vue.js是用渐进式JavaScript框架（Progressive Javascript framework）,是一个库。
Node跟Vue本身没什么关系，是方便开发使用npm管理包。
2，环境搭建
1）先下 nodejs
官网下载 nodejs.org/en/download/
有直接安装的pkg版和压缩包自己配环境版
nodejs.org/dist/v16.14.0/node-v16.14.0.pkg
然后发现tools目录下有了 node-v16.13.0-darwin-x64
原来是搞flutter的时候安过了。。。。
环境也早就配好了
export FLUTTER_HOME=~/tools/flutter
export PATH=${PATH}:${FLUTTER_HOME}/bin
export CHROME_EXECUTABLE=~/tools/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_172.jdk/Contents/Home
export PATH=${PATH}:${JAVA_HOME}/bin
export PATH=${PATH}:${JAVA_HOME}/jre/bin
export NODE_HOME=~/tools/node-v16.13.0-darwin-x64
export PATH=${PATH}:${NODE_HOME}/bin
验证
SENRSL:Downloads senrsl$ node --version
v16.13.0
SENRSL:Downloads senrsl$ npm --version
8.1.0
SENRSL:Downloads senrsl$
2）安装Vue3
虽然不知道发生了什么，但是自己就跑起来了。。。。
SENRSL:Downloads senrsl$ npm init vue@latest
Need to install the following packages:
create-vue@latest
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … hello
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
Scaffolding project in /Users/senrsl/Downloads/hello...
Done. Now run:
cd hello
npm install
npm run dev
npm notice
npm notice New minor version of npm available! 8.1.0 -> 8.5.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.2
npm notice Run npm install -g npm@8.5.2 to update!
npm notice
SENRSL:Downloads senrsl$ cd hello/
SENRSL:hello senrsl$ npm install
added 33 packages, and audited 34 packages in 16s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
SENRSL:hello senrsl$ npm run dev
> hello@0.0.0 dev
> vite
Pre-bundling dependencies:
vue
(this will be run only when your dependencies or config have changed)
vite v2.8.5 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 288ms.
SENRSL:hello senrsl$
先通过npm初始化了vue的latest版本，然后就自动安装了create-vue@latest，这是Vue的脚手架项目，
然后输入项目名hello，挨个询问是不是需要增加各种可选功能，默认No就创建hello项目成功。
提示 了运行三步，按提示运行起了hello项目。。。。
3）开发工具
可以选择VSCode或者WebStorm，基于VSCode的多次安装留下的不好印象，继续使用Intellij安Vue插件方式。。。。
插件安装 Node.js和Vue.js
此处配图3
下载完成后要点apply，要不然还以为有bug，一脸懵逼半天。。。。
然后 配置node.js sdk位置，以前配置过？打开直接是好的。。。。
此处配图4
3，通过Intellij创建Vue3项目
上面通过npm命令创建了Vue3项目并且运行，现在通过idea来创建
New Project -> JavaScript -> Vue.js
此处配图5
idea告诉你 Create a new Vue.js project using Vue CLI.
配置项目名称和目录
idea会自动创建，其间会提示要不要切更快的镜像源。。。。
创建完成后，直接运行项目，即npm serve命令。
配图7
4，运行旧项目
clone下旧项目来后，发现idea无法运行。
猜想可能是没有环境
尝试执行 npm install
详细日志参数 npm install --verbose
5，npm install 出现 No matching version found for @babel/helper-plugin-utils@^7.16.7.
日志
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @babel/helper-plugin-utils@^7.16.7.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
然后看 npmjs源里是有的 https://www.npmjs.com/package/@babel/helper-plugin-utils 7.16.7
然后查看项目是否切换了源
项目1
SENRSL:mobile-front-web senrsl$ npm info underscore
underscore@1.13.2 | MIT | deps: none | versions: 49
JavaScript's functional programming helper library.
keywords: util, functional, server, client, browser
dist
.tarball: 内网.com/repository/npm-fe-group/underscore/-/underscore-1.13.2.tgz
.shasum: 276cea1e8b9722a8dbed0100a407dda572125881
.integrity: sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g==
.unpackedSize: 901.0 kB
。。。。
dist-tags:
latest: 1.13.2 stable: 1.13.1
SENRSL:mobile-front-web senrsl$
项目2
SENRSL:hello3 senrsl$ npm info underscore
underscore@1.13.2 | MIT | deps: none | versions: 49
JavaScript's functional programming helper library.
keywords: util, functional, server, client, browser
dist
.tarball: https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz
.shasum: 276cea1e8b9722a8dbed0100a407dda572125881
.integrity: sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g==
.unpackedSize: 901.0 kB
。。。。
dist-tags:
latest: 1.13.2 stable: 1.13.1
SENRSL:hello3 senrsl$
看来旧项目里配置了公司内网源，上去看，果然 版本是旧的。。。。
临时设置使用官方源
SENRSL:mobile-front-web senrsl$ npm --registry https://registry.npmjs.org install @babel/helper-plugin-utils@^7.16.7
但这样又报无法找到公司内部库。。。。
先在package.json中删掉公司内部库，然后调用
SENRSL:mobile-front-web senrsl$ npm --registry https://registry.npmjs.org install @babel/helper-plugin-utils@^7.16.7 --verbose
安装 ok
然后恢复package.json，调用
SENRSL:mobile-front-web senrsl$ npm --registry http://内网/repository/npm-fe-group/ install @内网/fe-util@^1.38.0 --verbose
也ok
这样再看，node_modules目录里的库就是全的了。。。。
6，Error: listen EADDRNOTAVAIL: address not available
修改ip跟本机一致，如果找不到错误提示的ip，那代码中有可能配置的是域名。。。。
7，When you use `vue` option, make sure to install `vue-template-compiler`.
SENRSL:mobile-front-web senrsl$ npm install vue-template-compiler
changed 1 package in 3s
51 packages are looking for funding
run `npm fund` for details
SENRSL:mobile-front-web senrsl$ npm run dev
> mobile-front-web@0.1.0 dev
> vue-cli-service serve
INFO Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 21735ms 下午6:51:00
No type errors found
No lint errors found
Version: typescript 3.9.10, tslint 5.18.0
Time: 8852ms
App running at:
- Local: http://localhost:9000/
- Network: http://localhost:9000/
^CAssertion failed: (0), function uv_close, file ../deps/uv/src/unix/core.c, line 178.
Abort trap: 6
SENRSL:mobile-front-web senrsl$
竟然启动起来了。。。。
修改提交自动化部署一条龙服务启动。
8，Cannot read properties of null (reading 'pickAlgorithm')
切换到另一个旧项目，npm install 报 TypeError: Cannot read properties of null (reading 'pickAlgorithm')
尝试
SENRSL:front-web senrsl$ npm --v
8.1.0
SENRSL:front-web senrsl$ npm cache clear --forceSENRSL:front-web senrsl$ npm install --verbose
问题依旧
查了下，需要降版本到7.1几。。。。
继续尝试
SENRSL:front-web senrsl$ npm cache clear --force
npm WARN using --force Recommended protections disabled.
SENRSL:front-web senrsl$ npm i -g @sap/cds-dk
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
added 373 packages, and audited 374 packages in 2m
60 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
SENRSL:front-web senrsl$
其中 npm i是 install，-g 是 -global。。。。
依旧不行
猜想可能是部分库版本太高了。。。。
尝试把上个项目的 .npmrc拷过来，优先拉取公司内网低版本库
SENRSL:front-web senrsl$ npm cache clear --force
SENRSL:front-web senrsl$ npm install --verbose
报找不到外网上的高版本，跟上个项目问题类似，单拉外网这个库
SENRSL:front-web senrsl$ npm --registry https://registry.npmjs.org install nanoid@^3.1.30
SENRSL:front-web senrsl$ npm install --verbose
然后再删掉上个项目拷过来的.npmrc,再次执行
SENRSL:front-web senrsl$ npm install --verbose
竟然ok了
运行
SENRSL:front-web senrsl$ npm run dev
> front-web@0.1.0 dev
> vue-cli-service serve --open
INFO Starting development server...
Webpack starting...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
✔ Compiling
✔ Building modules
✔ Finish module graph
✔ Building modules
✔ Optimizing modules
✔ Chunk graph
✔ After chunk graph
✔ Optimizing modules
✔ Before module ids
✔ Module ids
✔ Optimizing modules
✔ Before chunk ids
✔ Optimizing modules
✔ Record modules
✔ Record chunks
✔ Processing modules
✔ Record hash
✔ Processing modules
✔ After seal
✔ Emitting
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 74931ms 上午11:39:56
No type errors found
No lint errors found
Version: typescript 3.9.7, tslint 5.20.1
Time: 26846ms
✔ After emitting
App running at:
- Local: xxxxx:8080/
- Network: xxxxx:8080/
SENRSL:front-web senrsl$
9，has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
知名的跨域问题。
2022年03月21日11:44:20
senRsl
2022年02月28日18:16:05
没有评论 :
发表评论