快速创建一个VUE 项目框架

#快速创建一个VUE 项目框架
PS D:\goprojects\skills\vue> npm create vue@latest
Need to install the following packages:
create-vue@3.12.1
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ 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 an End-to-End Testing Solution? » No
√ Add ESLint for code quality? » Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\goprojects\skills\vue\vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run format
  npm run dev

npm notice
npm notice New minor version of npm available! 10.8.2 -> 10.9.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0
npm notice To update run: npm install -g npm@10.9.0
npm notice

#单独进入工程
PS D:\goprojects\skills\vue> cd .\vue-project\
PS D:\goprojects\skills\vue\vue-project> code .


#安装插件-可打开VPN
Prettier - Code formatter

#启动项目-可打开VPN
npm config set registry https://r.cnpmjs.org
npm install

added 253 packages, removed 1 package, and changed 2 packages in 40s

npm run format

> vue-project@0.0.0 format
> prettier --write src/

src/App.vue 151ms (unchanged)
src/assets/base.css 13ms (unchanged)
src/assets/main.css 10ms (unchanged)
src/components/HelloWorld.vue 29ms (unchanged)
src/components/icons/IconCommunity.vue 5ms (unchanged)
src/components/icons/IconDocumentation.vue 8ms (unchanged)
src/components/icons/IconEcosystem.vue 8ms (unchanged)
src/components/icons/IconSupport.vue 3ms (unchanged)
src/components/icons/IconTooling.vue 5ms (unchanged)
src/components/TheWelcome.vue 20ms (unchanged)
src/components/WelcomeItem.vue 23ms (unchanged)
src/main.js 11ms (unchanged)
src/router/index.js 20ms (unchanged)
src/stores/counter.js 14ms (unchanged)
src/views/AboutView.vue 4ms (unchanged)
src/views/HomeView.vue 4ms (unchanged)

npm run dev

> vue-project@0.0.0 dev
> vite


  VITE v5.4.11  ready in 1458 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help
h

  Shortcuts
  press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit  

# 谷歌添加插件VUE DEVTOOLS F12时会有调试工具VUE
Vue.js devtool

#VSCODE 插件
ESLint: js eslint语法风格检查
Auto Rename Tag: tag rename
 : vue3语法支持
TypeScript Vue Plugin (Volar): Vue Plugin for TypeScript server
Vue VSCode Snippets: 代码片段*
	快速创建代码片段：vbase-3-setup
	

#======= ui ========
#添加源
#npm config set registry https://r.cnpmjs.org 
#[淘宝源]
#npm config set registry https://registry.npmmirror.com/ 

#PS D:\goprojects\vblog> npm create vue@latest
Need to install the following packages:
create-vue@3.12.1
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

√ Project name: ... ui
√ 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 an End-to-End Testing Solution? » No
√ Add ESLint for code quality? » Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\goprojects\vblog\ui...

Done. Now run:

  cd ui
  npm install
  npm run format
  npm run dev

#PS D:\goprojects\vblog> cd ui
#PS D:\goprojects\vblog\ui> npm install

added 244 packages in 35s

70 packages are looking for funding
  run `npm fund` for details

#PS D:\goprojects\vblog\ui> npm run format

> ui@0.0.0 format
> prettier --write src/

src/App.vue 123ms (unchanged)
src/assets/base.css 15ms (unchanged)
src/assets/main.css 9ms (unchanged)
src/components/HelloWorld.vue 29ms (unchanged)
src/components/icons/IconCommunity.vue 5ms (unchanged)
src/components/icons/IconDocumentation.vue 4ms (unchanged)
src/components/icons/IconEcosystem.vue 5ms (unchanged)
src/components/icons/IconSupport.vue 2ms (unchanged)
src/components/icons/IconTooling.vue 4ms (unchanged)
src/components/TheWelcome.vue 19ms (unchanged)
src/components/WelcomeItem.vue 17ms (unchanged)
src/main.js 8ms (unchanged)
src/router/index.js 12ms (unchanged)
src/stores/counter.js 6ms (unchanged)
src/views/AboutView.vue 4ms (unchanged)
src/views/HomeView.vue 2ms (unchanged)

#另外打开一个窗口进行开发UI
#PS D:\goprojects\vblog\ui> code .

#PS D:\goprojects\vblog\ui> npm run dev

> ui@0.0.0 dev
> vite


  VITE v5.4.11  ready in 1137 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help
  
  
# 安装 axios
# Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
npm install axios

#cors 解决跨域问题
https://github.com/gin-contrib/cors
go get github.com/gin-contrib/cors