Vue-cli3からのVuetifyを試す
はじめに
VuetifyというVue.jsで使えるマテリアルデザインUIフレームワークを学んでみたいと思い、書き出してみることにしました。といいつつもVue.jsも大して理解していないため、合わせて学びを深めたいと思います。
利用するための準備
node.jsを準備しておきます。私の環境では「v10.15.3」がインストールされています。
windows10でnode.jsのバージョンを切り替えて使う
>node --version
v10.15.3
vue-cli3.x系を使いたいと思いますので、準備をします。
Vue-cliインストール
> npm install -g @vue/cli
または
> yarn global add @vue/cli
すると、いろいろ出力されてインストールが完了するはずです。
ただ、Vue-cli2系がある場合は、先にアンインストールします。（共存する方法は別にありますが、3系で進めるため説明は省きます）
> npm uninstall -g vue-cli
インストールが完了後、バージョンを確認します。無事3.X系がインストールされています。
>vue --version
3.5.1
以上、準備は完了です。
プロジェクトを用意する
createコマンドでプロジェクトを作成します。
実行するとsample1というディレクトリが作成されます。
> vue create sample1
インストールはマニュアルを選択します。とりあえずインストールしたいので、次のものを選択しました。
Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
>(*) Unit Testing
( ) E2E Testing
いろいろ、選択させられるので、次のようにしました。
Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: default
完了後、ディレクトリ内に移動します。
> cd sample1
ひとまず起動してみる
devモードでの起動を次のコマンドで行います。
> npm run serve
すると次のようにアクセスするべきURLが表示するので、ブラウザでアクセスします。
DONE Compiled successfully in 3051ms
App running at:
- Local: http://localhost:8080/
- Network: http://xxx.xxx.xxx.xxx:8080/
http://localhost:8080/ にアクセスすると無事表示されました。
CTRL+Cでdev起動モードを終了させておきます。
vuetifyのインストール
ここからやっと導入です。
> vue add vuetify
どのモードでインストールする？と聞かれるのでDefaultにしました。
? Choose a preset: Default (recommended)
無事インストール完了です。
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
The following files have been updated / added:
.gitignore
README.md
babel.config.js
package-lock.json
package.json
public/favicon.ico
public/index.html
src/App.vue
src/assets/logo.png
src/assets/logo.svg
src/components/HelloWorld.vue
src/main.js
src/plugins/vuetify.js
You should review these changes with git diff and commit them.
起動してみる
先ほどと同じようにdevモードで起動します。
> npm run serve
デザインがvuetifyに切り替わりました。
これで準備が整いました。
次回以降vuetifyの基本を理解していこうと思います。
参考
Author And Source
この問題について(Vue-cli3からのVuetifyを試す), 我々は、より多くの情報をここで見つけました https://qiita.com/satoysan/items/1dc6558231ad5bf17717著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .