import{mount}from'@vue/test-utils'importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld.vue',()=>{it('renders a HelloWorld',()=>{constwrapper=mount(HelloWorld)expect(wrapper.text()).toMatch("HelloWorld!!")})})
DOM要素についてのテスト
import{mount}from'@vue/test-utils'importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld.vue',()=>{it('renders a HelloWorld',()=>{constwrapper=mount(HelloWorld)expect(wrapper.html()).toMatch("<div><p>HelloWorld!!</p></div>")})})
import{shallowMount}from'@vue/test-utils'importFoofrom'./Foo'constfactory=(values={})=>{returnshallowMount(Foo,{data(){return{...values}}})}describe('Foo',()=>{it('welcome メッセージを描画する',()=>{constwrapper=factory()expect(wrapper.find('.message').text()).toEqual("Welcome to the Vue.js cookbook")})it('usernameが7未満のときエラーを描画する',()=>{constwrapper=factory({username:''})expect(wrapper.find('.error').exists()).toBeTruthy()})it('usernameが空白のときエラーを描画する',()=>{constwrapper=factory({username:''.repeat(7)})expect(wrapper.find('.error').exists()).toBeTruthy()})it('usernameが7文字かそれ以上のとき、エラーが描画されない',()=>{constwrapper=factory({username:'Lachlan'})expect(wrapper.find('.error').exists()).toBeFalsy()})})
# 現在のNodeのバージョンを確認
nodebrew ls
v5.3.0
v9.10.1
v10.1.0
v12.12.0
current: v5.3.0
残念ながら、5.3.0でした
# とりあえず5よりもあげるようにする
nodebrew use v9.10.1
これでエラー出なくなりました！
引き続き開発環境を作ります（初期化）
// vueChatというプロジェクト名にしました
$ vue init webpack vueChat
# ここから作成するプロジェクトについて色々入力していく
? Project name vuechat
? Project description A sample chat of Vue.js
? Author azumax
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vueChat".
インストールが完了したら作ったディレクトリに移動して、npm実行する
# To get started:
$ cd vueChat
$ npm run dev
ブラウザにアクセスしてみる
(http://localhost:8080)
上図のような画面が表示されれば、ひとまず開発環境構築は成功です！
ディレクトリ構成の確認
開発環境のディレクトリ構成を確認してみましょう
index.html
プロジェクトの起点になる
表示用HTML
src
作成したアプリケーションのソースコード格納
作業用ディレクトリ
src配下のディレクトリ
main.js
アプリケーションの起点。エントリーポイントとなるファイル
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
## ライブラリやコンポーネントをインポートする
## この3つは大事そう！
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
実は、nodejsの中に、requireを使う時に、require.reslove functionを使ってファイルのパスを探している。このfunctionは優先順位は以下になる。 require(X) from module at path Y
1.もしXはコアのパッケージかどうか、普段のpathなどみたいは直接引用される。ではなければ、次へ。
2.もしXは/から始めれば、YのパスはOSのrootと設定。ではなければ、次へ。
3.もしXは./,/,../から始めれば、(Y + X)ファイルかディレクトリ引用。ではなければ、次へ。
4.node_modulesフォルダの中に、見つかる！
実は、nodejsの中に、requireを使う時に、require.reslove functionを使ってファイルのパスを探している。このfunctionは優先順位は以下になる。 require(X) from module at path Y
1.もしXはコアのパッケージかどうか、普段のpathなどみたいは直接引用される。ではなければ、次へ。
2.もしXは/から始めれば、YのパスはOSのrootと設定。ではなければ、次へ。
3.もしXは./,/,../から始めれば、(Y + X)ファイルかディレクトリ引用。ではなければ、次へ。
4.node_modulesフォルダの中に、見つかる！
$ npm run serve
> my-project@0.1.0 serve /Users/hoge/hoge
> vue-cli-service serve
INFO Starting development server...
10% building 2/2 modules 0 activeevents.js:180
throw er; // Unhandled 'error' event
^
Error: getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:60:26)
Emitted 'error' event at:
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1412:12)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:60:17) {
errno: 'ENOTFOUND',
code: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'x86_64-apple-darwin13.4.0'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-project@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/.npm/_logs/2020-01-11T15_34_59_526Z-debug.log
gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
gyp ERR! find Python Python is not set from environment variable PYTHON
