目 录CONTENT

文章目录

Vue安装和搭建

米尔嘉
2023-10-27 / 0 评论 / 1 点赞 / 284 阅读 / 459 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-12-26,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Vue项目

安装Vue项目所需要文件

#安装NodeJS
官网下载
#全局安装Vue CLI
npm install -g @vue/cli
#安装element-ui
npm i element-ui -S
#安装axios
npm install axios

创建vue项目

  • 命令行:直接通过命令行方式创建vue项目
    vue create vue-project01
  • 图形化界面:通过命令先进入到图形化界面,然后再进行vue工程的创建
    vue ui

vue项目目录介绍

重点文件或目录介绍:

  • node_modules:当前项目依赖的js包
  • assets:静态资源存放目录
  • components:公共组件存放目录
  • App.vue:项目的主组件,页面的入口文件
  • main.js:整个项目的入口文件
  • package.json:项目的配置信息、依赖包管理
  • vue.config.js:vue-cli配置文件

首先在vue.config.js文件中修改运行端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 7000
  }
})

在main.js文件中引入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

修改App.vue文件,并且添加路由

<!-- 模版部分,由它生成HTML代码 -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<!-- 控制模版的数据来源和行为 -->
<script>
export default {
  components: { },
  data () {
    return {
      message: "Hello Vue"
    }
  }
  
}
</script>


<!-- CSS样式 -->
<style>

</style>

在src\router\index.js文件中添加路由

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import( '../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import( '../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/link'
  },
  {
    path: '/element',
    component: () => import( '../views/element/ElementView.vue')
  }
]

在src\views文件下新建文件夹element,并且在此目录下新建vue文件,列如ElementView.vue

1

评论区