Nuxtjs vue-resource element 安裝及使用

新建一個目錄

新建一個Nuxt.js的目錄，右擊此目錄使用visaul studio code 打開

安裝ESLint、Vetur插件

安裝vs code擴展ESLint，此插件用於編輯器的js 語法交驗。

安裝 Vetur，此插件用於vue高亮顯示。

Visual studio code 設置

File=>Preferences=>Settings

1、設置如下(全局)

 

{
    //tab 鍵插入2個空格
    "editor.tabSize": 2,
    //換行 CR(\r: carriage return), LF(\n:line feed)
    "files.eol": "\n",
    //js 方法圓括號前插入空格
    "vetur.format.js.InsertSpaceBeforeFunctionParenthesis": true,
    //js 方法圓括號前插入空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "eslint.autoFixOnSave": true
}

2、設置方法2(單個文件),左擊vs code 右下角Spaces:4，設置爲2，CRLF設置爲 LF

 

安裝vue cli

命令行(ctrl+~)中輸入

npm install --global vue-cli

Nuxtjs安裝

https://nuxtjs.org/guide/installation

命令行(ctrl+~)中輸入

vue init nuxt-community/starter-templateelement-admin

cd element-admin

npm install

安裝vue-resource

https://github.com/pagekit/vue-resource

命令行(ctrl+~)中輸入

npm install vue-resource

安裝element-ui

http://element.eleme.io/#/zh-CN/component/installation

命令行(ctrl+~)中輸入

npm i element-ui -S

 

 

將vue-resource和element-ui註冊到nuxtjs中

1、在項目的plugins目錄下新建文件vue-resource.js文件內容如下

import Vue from 'vue'
import vueResource from 'vue-resource'

Vue.use(vueResource)

2、在項目的plugins 目錄下新建文件element-ui.js 文件內容如下

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

3、配置nuxt服務器設置nuxt.config.js文件,設置如下

 

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'element-admin',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  plugins: [
    '~plugins/vue-resource',
    '~plugins/element-ui'
  ],
  /*
  ** Build configuration
  */
  build: {
    vender: [
      'vue-resource',
      'element-ui'
    ],
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

添加測試頁面

1、在static目錄下創建test.json文件文件內容如下

{
  "name": "This is a test json file"
}

2、在pages目錄下添加一個目錄demo,新增加一個form.vue文件

 

文件內容如下

 

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <nuxt-link class="button--green" to="/demo">返回</nuxt-link>
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="生日">
      <el-date-picker type="date" placeholder="選擇日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
    </el-form-item>
    <el-form-item label="身高">
      <el-input-number v-model="form.stature"></el-input-number>
    </el-form-item>
    <el-form-item label="性別">
      <el-radio class="radio" v-model="form.gender" label="female">女</el-radio>
      <el-radio class="radio" v-model="form.gender" label="male">男</el-radio>
    </el-form-item>
    <el-form-item label="婚否">
      <el-checkbox v-model="form.isMarried">已婚</el-checkbox>
    </el-form-item>
    <el-form-item label="愛好">
      <el-checkbox-group v-model="form.favorite">
        <el-checkbox label="音樂"></el-checkbox>
        <el-checkbox label="足球"></el-checkbox>
        <el-checkbox label="籃球"></el-checkbox>
        <el-checkbox label="禁用" disabled></el-checkbox>
        <el-checkbox label="選中且禁用" disabled></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="活動區域">
      <el-select v-model="form.region" placeholder="請選擇活動區域">
        <el-option label="昆明" value="kunming"></el-option>
        <el-option label="呈貢" value="chenggong"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活動區域">
      <el-select v-model="form.language" multiple placeholder="掌握的編程語言">
        <el-option value="Basic">Basic</el-option>
        <el-option value="C">C</el-option>
        <el-option value="C++">C++</el-option>
        <el-option value="C#">C#</el-option>
        <el-option value="Java">Java</el-option>
        <el-option value="Javascript">Javascript</el-option>
        <el-option value="Python">Python</el-option>
        <el-option value="Ruby">Ruby</el-option>
      </el-select>
    </el-form-item>
    <div>
      <el-button @click="showForm">獲取數據</el-button>
      <el-button @click="onClick">ajax</el-button>
    </div>
  </el-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        name: '反轉的分針',
        birthday: new Date('1985-04-06'),
        stature: 173,
        gender: 'male',
        isMarried: false,
        favorite: ['音樂'],
        region: 'chenggong',
        language: ['C', 'Java']
      }
    }
  },
  methods: {
    showForm () {
      this.$alert(JSON.stringify(this.form))
    },
    onClick () {
      var me = this
      // https://zh.nuxtjs.org/guide/assets
      me.$http.get('/test.json').then((response) => {
        me.$alert(response.body)
      })
    }
  }
}
</script>

生成項目

命令行(ctrl+~)中輸入

npm run build

會自動重建.nuxt目錄下的所有文件包括路由

。

開發項目

npm run dev

會自動重建.nuxt目錄下的所有文件包括路由,修改文件會重啓服務

 

調試項目

1.    使用npm run dev啓動項目

2.    瀏覽器中打開http://localhost:3000/demo/form

在webpack中找到對應的位置，添加斷點。存在一些問題。比如不會在斷點行停住。

發佈項目

命令行(ctrl+~)中輸入

npm run generate

 

部署

新建一個網站，把網站指向項目的dist目錄