vue目录结构&&webpack配置

最新推荐文章于 2024-05-13 11:14:34 发布

致可乐

最新推荐文章于 2024-05-13 11:14:34 发布

阅读量1.3k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/ling_xy/article/details/119272183

版权

一、vue目录结构

完整版中：

build文件：打包之后的项目文件

config：配置目录（包括端口之类）

node_modules：依赖包文件

src：开发目录文件【开发只使用这个】
包括：

assets：放置一些图片（如logo）
components：放置组件文件。可以不用
App.vue：项目入口文件（可以将组件直接写在这里，而不使用components目录）
（整个项目的主模板,通过webpack打包后会把整个文件放到index.html中，生成到id="app"中）
main.js：项目的核心文件。整个项目加载从这里开始

static：静态资源目录文件（本地图片，字体，css等非服务端）

test：初始测试目录，可删除

index.html：首页入口文件（可以加一些meta信息或代码统计之类）

<body>
    <div id="app"></div>   //渲染到它里面去
    <script src="/dist/build.js"></script>   //APP.vue打包后的文件路径
  </body>

package.json：项目配置文件

README.md：说明文档

webpack.config.js：webpack配置文件

vue init webpack-simple name
在这里插入图片描述
安装依赖
cnpm install

在这里插入图片描述
简单版的配置全在webpack.config.js中（完整版没有这个文件，在config中配置）

@：指 src 目录

var path = require('path')
var webpack = require('webpack')

module.exports = {
   
  entry: './src/main.js',  //进入文件

  //输出配置（打包）

关注