梳理vue项目,删除不必要的代码和组件
1.创建分支
使用vscode打开前端项目
执行:git status检查项目状态。
执行:git checkout -b login 创建login分支,并且切换到该分支。
执行:git branch 查看当前项目所有分支
执行:git status 查看项目当前在哪个分支上
2.使用vue ui打开一个刚创建的vue项目
打开前端项目,点击“任务”->server->启动,等待编译完成后,点击“启动app”,跳转到默认主页
3.删除不必要的代码和组件
3.1删除App.vue中的默认内容
项目找到src->main.js,发现vue实例在App.vue中
进入App.vue,
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
<p>
If Element is successfully added to this project, you'll see an
<code v-text="'<el-button>'"></code>
below
</p>
<el-button>el-button</el-button>
</div>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
删除模板内容,组件和style样式
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
此时页面就没有任何内容了
3.2删除默认的路由内容和对应的view文件
修改路由,ctr+单击路由,
找到路由设置
删除默认路由内容和默认的路由view文件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
3.3删除除了app以外的其余组件
删除组件,因为一开始干净的项目只用到app组件,因此可以删除components文件夹下的其他所有组件。
现在,整个vue项目结构就梳理了一遍,删除了不必要的代码和组件