vuejs入门实践小项目

最新推荐文章于 2025-03-16 17:06:35 发布

liujing_555

最新推荐文章于 2025-03-16 17:06:35 发布

阅读量1.1k

点赞数 1

分类专栏： vuejs 文章标签： vuejs elementui 新闻管理

本文链接：https://blog.youkuaiyun.com/liujing_555/article/details/89965922

版权

本文介绍了如何使用Vue.js和ElementUI快速创建一个包含注册登录、新闻列表、新闻添加和个人中心功能的小型新闻管理应用。通过新建项目、配置路由、创建组件以及运用ElementUI，一小时即可完成基本功能的实现。

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

首先新建一个项目这个很多博客都讲过，就不再赘述，下面直接开始做demo，一个小时搞定vue小demo。

新建文件夹view存放页面，demo共有5个页面，Add.vue、Home.vue、List.vue、Login.vue、User.vue。
懒得写CSS代码，用的Elementui，感兴趣的小伙伴可以尝试一下。
创建好文件之后开始写代码，撸起袖子加油干！！！
打开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/>'
})

打开router文件下的index.js文件，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/view/Login'
import Home from '@/view/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'list',
          name: 'list',
          component: () => import(/*webpackChunkName: "list" */ '@/view/List')
        },
        {
          path: 'user',
          name: 'user',
          component: () => import(/*webpackChunkName: "user" */ '@/view/User')
        }
      ]
    },
    {
      path: '/add',
      name: 'add',
      component: () => import(/*webpackChunkName: "add" */ '@/view/Add')
    }
  ]
})

在src文件下新建一个store.js文件，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    stat

最低0.47元/天解锁文章