VUE 起步

最新推荐文章于 2022-05-18 19:18:50 发布

zhanghs1988

最新推荐文章于 2022-05-18 19:18:50 发布

阅读量322

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： VUE项目入手

本文链接：https://blog.youkuaiyun.com/zhanghs11/article/details/86514070

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用VUE进行前后端分离的实战方法，推荐了ElementUI的starter项目作为快速入手的模板。通过克隆项目、安装依赖、本地调试、构建部署等步骤，详细展示了如何从零开始搭建一个VUE应用，并配置了Webpack、服务端口及代理，最后通过具体代码示例说明了如何使用ElementUI组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端分离，VUE项目入手推荐https://github.com/ElementUI/element-starter，不用重头配置。

克隆到本地

 git clone https://github.com/ElementUI/element-starter.git

安装依赖包

yarn   # 或者 npm install

本地调试

npm run dev

build

npm run build

部署成功后截图
http://127.0.0.1:8010/
工程目录
配置文件 webpack.config.js
vue项目入口

  entry: {
    vendor: './src/vendor',
    index: './src/main.js'
  },

项目build输出路径

  output: {
    path: resolve(__dirname, 'dist'),
    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
    chunkFilename: '[id].js?[chunkhash]',
    publicPath: options.dev ? '/assets/' : publicPath
  },

服务端口配置

  devServer: {
    host: '127.0.0.1',
    port: 8010,
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

main.js文件

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

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <el-button @click="startHacking">Start</el-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>