vue-cli脚手架新建项目目录详解

最新推荐文章于 2025-05-20 17:51:25 发布

天心天地生

最新推荐文章于 2025-05-20 17:51:25 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/tianxintiandisheng/article/details/102677707

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍如何使用Vue CLI 3.0版本搭建项目，包括目录结构、依赖模块、配置路径及端口、webpack配置、路由设置等核心内容。通过具体代码示例，展示main.js和App.vue的实现细节。

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

使用vue-cli（脚手架工具版本）：3.0.0-rc.5

目录结构截图：

简要说明：
index.html文件入口
src放置组件和入口文件
node_modules为依赖的模块
config中配置了路径端口值等
build中配置了webpack的基本配置、开发环境配置、生产环境配置等

main.js 入口文件

main.js 是入口文件，主要作用是初始化vue实例并使用需要的插件

import Vue from 'vue/dist/vue';
import App from './App.vue';
import Antd from 'vue-antd-ui';
import 'vue-antd-ui/dist/antd.css';
import Router from 'vue-router'

Vue.use(Router);
Vue.use(Antd);
Vue.config.productionTip = false;


const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
const router = new Router({
    routes : [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]
});

new Vue({
    el:'#app',
    router,
    render: h => h(App)
}).$mount('#app');

App.vue主组件

App.vue是主组件，所有页面都是在App.vue下进行切换的。也可以理解为所有的路由也是App.vue的子组件。所以将router标示为App.vue的子组件。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>