Tdata技术哥
Tdata技术哥

web前端 | vue.js系列教程3

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

技术哥

给你不一样的世界


vue

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

一. webpack工程模板

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

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

  • 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模板

  • 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里扮演什么角色，怎么去配置它呢？

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

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

二. 工程目录

  • 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看看其结构