Vue-Element(一)项目的创建

说明

自用
资料: vue实现动态注册并渲染组件

版本

vue: 2.9.6
webpack: 3.12.0

一、安装 webpack

全局安装

npm install webpack -g

查看安装

webpack -v

二、安装vue-cli

npm install vue-cli -g

三、创建项目

vue init webpack projectname(项目的名称)

四、安装依赖

进入项目文件夹后执行npm install

cd workbench
npm install

五、安装和设置element-ui

官网:https://element.eleme.cn

安装
npm i element-ui -S
完整引入

在 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.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

六、安装http库和配置http请求设置

安装axios
npm install axios
配置request请求

src下新建utils/request.jsrequest.js内容如下:

import axios from 'axios'
import qs from 'qs'
import {Message} from 'element-ui'

// create an axios instance
const service = axios.create({
  baseURL: 'http://10.10.20.35:8000/api', // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  showLoading: true,
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    console.log('request=>', config)
    if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  error => {
    // do something with request error
    console.log('request.error=>', error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    console.log('response=>', response)

    const res = response.data

    if (res.code < 0) {

      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 2 * 1000
      })

      return Promise.reject(res.msg || 'Error')
    } else {
      return res
    }
  },
  error => {
    console.log('response.error=>', error) // for debug
    Message({
      message: error.message || 'Error',
      type: 'error',
      duration: 2 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

新建 api 和 views
测试接口访问正常

user.js中新增登录接口

import request from '@/utils/request.js'

export const login = (data) => {
  return request({
    url: 'user/login',
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data
  })
}

新增登录视图login.vue

<template>
  <el-form :model="userForm" label-width="80px" class="user-login">
    <el-form-item label="用户名">
      <el-input v-model="userForm.user"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="userForm.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登陆</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {login} from '@/api/user'
import {Message} from 'element-ui'

export default {
  name: 'login',
  data () {
    return {
      userForm: {
        user: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm () {
      login(this.userForm).then(result => {
        Message(result.msg)
      })
    }
  }
}
</script>

<style scoped>
  .user-login {
    width: 500px;
  }
</style>

src 下的 app.vue修改为

<template>
  <router-view/>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

src/router/index.js修改为

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/user/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

执行命令

npm run dev

成功后访问http://localhost:8080

初次访问

输入登录信息,点击登录后报错:
Access to XMLHttpRequest at 'http://10.10.20.35:8000/api/user/login' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
出现跨域问题。

登录报错

七、解决跨域问题

在项目目录下config/index.js中新增如下配置:

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      "/api": {
        target: 'http://10.10.20.35:8000/api',
        pathRewrite:{
          '^/api':''
        }
      }
    },
    ..... 此处省略原有配置
}

config/dev.env.js中新增:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  baseUrl: '"/api"'
})

config/prod.env.js中新增

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  baseUrl: '"http://10.10.20.35:8000/api/"' //此次填写生产环境域名
}

src/utils/request.jsbaseURL修改如下

// create an axios instance
const service = axios.create({
  baseURL: process.env.baseUrl, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  showLoading: true
})

再次运行后,尝试登录:


登录成功

八、vue 多环境配置

参考如下:

https://www.cnblogs.com/itmrzhang/p/11008280.html

九、将index.html转移到src

index.html位置

原位置

index.html转移到src
转移后

转移后需要修改build/webpack.dev.conf.js

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      inject: true
    }),

转移后还需要修改build/webpack.prod.conf.js

    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: './src/index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • jHipster - 微服务搭建 CC_简书[https://www.jianshu.com/u/be0d56c4...
    quanjj阅读 794评论 0 2
  • 开发一个项目,采用什么语言都可以,主要能熟练高效的开发都是合理的,这次我们采用vue来开发一个团队项目。在开...
    MsgSS阅读 2,911评论 3 9
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,067评论 0 2
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,889评论 1 4
  • 本文基于工作项目开发,做的整理笔记因工作需要,项目框架由最初的Java/jsp模式,逐渐转移成node/expre...
    SeasonDe阅读 7,440评论 3 35