前端 | vue.js系列教程3

原创文章，转载请注明：转载自技术哥

微信订阅号：技术哥

---

技术哥

给你不一样的世界

---

image

在上一期的vue教程我们搭建好了vscode的开发环境后，写下第一行代码"Hello World！"，大家有没有好奇为什么这行代码要写在HelloWorld.vue呢？今天就为大家讲解下vue工程目录、webpack模板、入口文件到目标组件

---

一. webpack工程模板

我们起初是通过行命令生成vue工程的
vue init webpack my-project

在新建工程时它也会询问我们一些关于我们要工程的问题，这里给大家详解一下

image

• project name：工程名

• project description：工程描述

• author：作者姓名

• vue build：有standalone与runtime-only build两种，分别为独立构建和运行时构建。后者删除了模板编译的功能，因此无法支持带 template 属性的 Vue 实例选项。具体vue官网有详解：https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

• install vue-router：vue-router路由组件。选上会安装并默认配置一个写好的vue-router模板

image

• Use eslint to lint your code：用eslint规范你的代码。eslint是vue的一个语法规则和代码风格的检查工具，但其可能会给代码语法做太多约束，建议关闭

• Set up unit tests：建立单元测试模块。单元测试一般用来封装大型公共组件时用的,一般不需要

• setup e2e tests with Nightwatch：通过Nightwatch建立端对端单元测试，一般不需要

• should we run 'npm install' for you after the project has been created：新建工程后，后续通过什么来安装其他依赖，有npm、yarn、none选项，选npm

Webpack工程模板建立完成，但webpack在vue里扮演什么角色，怎么去配置它呢？

image

• 是什么：如上图所描述的，webpack就是可以把vue工程整合打包，方便vue组件化。我们通过代码 npm run dev默认在本机8080端口打开浏览器调试也是webpack打包的结果

• 如何配置：可以进入到工程目录下build/webpack.base.conf.js里进行修改，如alias项配置入口位置，rules配置是否引用eslint等。

二. 工程目录

image

• build：webpack目录

• config：webpack目录2

• node_modules：npm代码仓库

• Src：根目录

• Src/assets:图片音频资源文件夹

• src/components：.vue组件存放位置

• src/router：vue-router配置文件夹

• src/App.vue：工程根组件

• src/main.js：工程入口文件

• Static:静态资源目录

• package.json：项目配置文件

• index.html：首页入口文件

上述基本上就是我们在编辑vue工程时需要改动的文件了。然后我们来打开HelloWorld.vue看看其结构

image