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')
}
]