15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > Vue2.0项目入门 — 详解Vue-cli webpack模板

Vue2.0项目入门 — 详解Vue-cli webpack模板

时间:2023-06-06 23:54:01 | 来源:网站运营

时间:2023-06-06 23:54:01 来源:网站运营

Vue2.0项目入门 — 详解Vue-cli webpack模板:

项目结构:

├── build/ # webpack 编译任务配置文件: 开发环境与生产环境│ └── ...├── config/ │ ├── index.js # 项目核心配置│ └── ...├ ── node_module/ #项目中安装的依赖模块 ── src/│ ├── main.js # 程序入口文件│ ├── App.vue # 程序入口vue组件│ ├── components/ # 组件│ │ └── ...│ └── assets/ # 资源文件夹,一般放一些静态资源文件│ └── ...├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)├── test/│ └── unit/ # 单元测试│ │ ├── specs/ # 测试规范│ │ ├── index.js # 测试入口文件│ │ └── karma.conf.js # 测试运行配置文件│ └── e2e/ # 端到端测试│ │ ├── specs/ # 测试规范│ │ ├── custom-assertions/ # 端到端测试自定义断言│ │ ├── runner.js # 运行测试的脚本│ │ └── nightwatch.conf.js # 运行测试的配置文件├── .babelrc # babel 配置文件├── .editorconfig # 编辑配置文件├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹 ├── index.html # index.html 入口模板文件└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 └── README.md #介绍自己这个项目的,可参照github上star多的项目。build/这个目录包含实际为开发环境与生产环境的webpack配置文件。通常你不需要关注这些文件,除非你想自定义webpack的loader,这样的话,应当先看看build/webpack.base.conf.js这个文件。

src/

这个是你放绝大部分程序代码的地方。如何管理这个目录内的所有内容随你决定;如果你使用Vuex,建议的结构一般是这样的:

├── index.html├── main.js├── api│ └── ... # 抽取出API请求├── components│ ├── App.vue│ └── ...└── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块

static/

这个目录是你不想通过webpack处理的静态资源目录。这些目录中的资源会在webpack构建的时候,被直接复制到相同的目录中。

<blockquote>

你应该注意到了,在项目结构上我们有静态资源两个目录:src/assets和static/。他们之间有什么区别?

详细说明请点击Vue2.0项目入门—静态资源目录src/assets和static/区别

</blockquote>

test/unit

包含单元测试相关文件。

test/e2e

包含端到端测试相关文件。

index.html

这个是单界面应用中的模板Index.html。在开发环境中,webpack会生成相关资源,这些资源的url会自动插入到模板来渲染最终的HTML。

package.json

npm包元数据文件,包括所有的构建依赖与构建命令。

所有的构建命令,都会通过NPM脚本执行。

npm run dev

<blockquote>

启动一个Node.js本地开发服务器。

</blockquote>

npm run build

<blockquote>

构建生成环境的资源。

</blockquote>

npm run e2e

<blockquote>

端到端测试。

</blockquote>




作者:大青呐

链接:https://www.jianshu.com/p/a501690dc433

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

关键词:模板,项目,入门

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭