概要
Vue.jsプロジェクトを開始する方法はいくつかあります。プロジェクトの要件や個人の好みに応じて最適な方法を選択できます
始め方
- VueCLI
- Vue UI
- Vite
- CDN
- Quasar
ここではVueCLI, Viteでの始め方について記述したいと思います。ほかの方法については興味があれば試してみるのも良いかと思います。Quasarはマルチプラットフォームに対応していますがただし、日本語のドキュメントが少ないためか、国内だと使用している人は少ないかもしれません。
各方法で初め
環境、バージョンなど
- Nodejs : 18.20.0
- Npm : 10.5.0
- VueCli : 5.0.8
- Vue: 3.2.13
VueCLIを利用
$ npm install -g @vue/cli
$ vue create my-project
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> vue3+TS+Router+Vuex+ESLint+PackageJson ([Vue 3] babel, typescript, router, vuex)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features? Pick the package manager to use when installing dependencies: (Use arrow keys)
Use Yarn
> Use NPM✨ Creating project in C:\Users\twonine\work\devl\vue-start\my-project.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
[#########.........] | idealTree:@vue/cli-shared-utils: sill placeDep ROOT semver@6.3.1 OK
... しばらくインストールが続きます。
🎉 Successfully created project my-project.
👉 Get started with the following commands:
$ cd my-project
$ npm run serve
$このようになるとインストール成功です。
実行してみます
$ cd my-project
$ npm run serve
> my-project@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 6035ms 21:01:29
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.50:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.
ブラウザから接続してみる
フォルダー構造
Viteでの開始
my-vue-appプロジェクトを作成してみたいと思います。
$ npm create vite@latest my-vue-app -- --template vue
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y)y
Scaffolding project in C:\Users\twonine\work\devl\vue-start\my-vue-app...
Done. Now run:
cd my-vue-app
npm install
npm run dev提示してるコマンドを実行してみます。
$ cd my-vue-app
$ npm install
... ... ...
$npm run dev VITE v5.2.8 ready in 848 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show helpブラウザから接続してみる
フォルダー構造
