_vue

npm(Node Package Manager)
jsvue使

npm
Node.jsnpm = Node.js

node.js
homebrew
brew install node@20
node@20 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.
If you need to have node@20 first in your PATH, run:
echo 'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> ~/.zshrc
For compilers to find node@20 you may need to set:
export LDFLAGS="-L/usr/local/opt/node@20/lib"
export CPPFLAGS="-I/usr/local/opt/node@20/include"
==> Summary
🍺 /usr/local/Cellar/node@20/20.17.0: 2,068 files, 60.3MB
==> Running `brew cleanup node@20`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
PATH
echo 'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> ~/.zshrc
node -v
# v20.17.0
npm -v
# 10.8.2
vue.js
laravel
~/Desktop/Laravel_kirThread/local/laravel_kirthread/backend
$ npm install vue@3.4
npm install vue@3.4
added 2 packages, removed 7 packages, changed 7 packages, and audited 1165 packages in 8s
22 packages are looking for funding
run `npm fund` for details
81 vulnerabilities (2 low, 55 moderate, 24 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
npm audit fix

# ver
npm list vue
# vue 3.4.38
backend@ /Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend
vue@3.4.38
@vue/server-renderer@3.4.38
vue@3.4.38 deduped
backend/package.json vue
"devDependencies": {
"axios": "^0.19",
...
"vue": "3.4", //
"vue-template-compiler": "^2.6.10"
}

npm run dev
Error:
Vue packages version mismatch:
- vue@3.4.38 (/Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/vue/index.js)
- vue-template-compiler@2.7.16 (/Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/vue-template-compiler/package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
vue
npm uninstall vue-template-compiler
npm install @vue/compiler-sfc
package.jsonvue-template-compiler
laravel-mix
laravel-mix
# laravel-mix
npm view laravel-mix version
# package.json
"laravel-mix": "^6.0.49",
package.lock
npm installjson

npm run dev
example
scss
使 webpack.mix.js scss
mix.js('resources/js/app.js', 'public/js').vue()
// .sass('resources/sass/app.scss', 'public/css')
.version();
{{-- vue.js --}}
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
npm view sass version
npm view sass-loader version
# package.jsonlocknpm install


vite Laravel Mix
使
laravel mix
webpacklaravel
vite
laravel
:vite使
vite laravel mix
webpack.mix.js
laravel-mix使
package.json
"cross-env": "^7.0",
"laravel-mix": "^6.0.49",
vite
$ npm install vite @vitejs/plugin-vue
$ npm install vue-router@4
使
$ npm install --save-dev laravel-vite-plugin
vite.config.js
import vue from '@vitejs/plugin-vue'; vue()
resources/js/app.js
laravel mix

style
publiccss/js
publicresources
public/css/style.css resources/css/app.css
backend/vite.config.js css
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
bootstrap npm
npm install bootstrap
bootstrap v4.6.0
npm fix --audit
app.js bootstrap
vite.config.js bootstrapjs
// BootstrapJavaScriptCSS
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
bootstrapOK
jQuery
# package.json
"jquery": "^3.2",
# jQuerynpm
npm install jquery
# app.js
import $ from 'jquery';
// jQuery
$(document).ready(function() {
console.log('jQuery is working!');
});
使
jspublicresource

jQuery調
jQuery使 reaction.js
// jQuery
import $ from 'jquery';
{
document.addEventListener( 'DOMContentLoaded' , function( e ) {
'use strict';
....

vite
npm run dev
npm run build

git checkout -b 240826_vue_upgrade origin/240826_vue_upgrade
# error: Your local changes to the following files would be overwritten by checkout:...
# stash
git add .
git commit -m "commit"
#
git checkout -b 240826_vue_upgrade origin/240826_vue_upgrade
vue3.4
(vitecss/js

npm
macwindowsnpm
npm
# app
# node.js / npm
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
&& apt-get install -y nodejs
docker compose build --no-cache
# ver
root@ac0f5ea8e514:/var/www/laravel_kirthread# npm -v
10.8.2
root@ac0f5ea8e514:/var/www/laravel_kirthread# node -v
v20.17.0
npm install 使