LoginSignup
0
1

More than 5 years have passed since last update.

nuxt.js 1.0.0-rc11+element ui 2.0.8を動かす

Last updated at Posted at 2017-12-19

bash on windowsの設定

  1. Bash on Windowsのホームディレクトリ変更
  2. Node.jsの導入

nuxt.js + element uiの導入

$ mkdir nuxt
$ cd nuxt
$ npm init
$ vi package.json

package.jsonの中身

今回使用したバージョンではdependenciesのvue関連の3つのバージョンをそろえて記載しないとエラーとなります。
元ネタのURL
{
"name": "nuxt",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"nuxt": "^1.0.0-rc11",
"vue": "^2.5.3",
"vue-server-renderer": "^2.5.3",
"vue-template-compiler": "^2.5.3",
"element-ui": "^2.0.8"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^4.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1"
}
}

$ npm i

動かすためのファイルを作成

ファイルの中身はこちらを参照

設定ファイル
・nuxt.config.js
・plugins/element-ui.js

コンテンツ
・layouts/default.vue
・pages/index.vue

nuxt.jsを動かす

$ npm run dev
OPEN http://localhost:3000
と表示されたら成功です。

また、「npmのせいではない」といった内容のエラーが出た場合は、
ポートが使用されている場合があるので、bash on windowsを再起動するなどして解消させました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1