vue初始化项目

tech2025-10-10  5

1、初始化项目:

命令:F:\VUEworkspace>vue init webpack demo-project

2、创建好的项目目录结构:

其中: build—项目构建(webpack)相关代码

文件说明build.js生产环境构建脚本check-versions.js检查npm、node.js版本utils.js构建相关工具方法vue-loader.conf.js配置css加载器以及编译css之后自动添加前缀webpack.base.conf.jswebpack基本配置webpack.dev.conf.jswebpack开发环境配置webpack.prod.conf.jswebpack生成环境配置

config—基本配置信息,如端口等

文件说明dev.env.js开发环境变量index.js项目配置文件prod.env.js生成环境变量

node_modules—npm加载的项目依赖模块 src—开发目录,包含assets(放置图片),components(组件文件夹),app.vue(项目入口文件),main.js(项目核心文件)

文件说明assets资源目录,防止一些图片或公共js、公共css,这里的资源会被webpack构建components组件目录,我们写的组件就放在这个目录router前端路由,我们需要配置的路由路径写在index.js里App.vue根组件main.js入口js文件

static—静态资源目录 test—初始测试目录,可以删除 index.html—首页入口文件,可以添加一些meta信息等 package.json—项目配置文件 .xxxx文件—一些配置文件,包括语法配置,git配置等 README.md—项目说明文档,为markdown格式

3、启动:

命令:F:\VUEworkspace\demo-project>npm run dev

4、在浏览器地址栏中输入:http://localhost:8080/

最新回复(0)