[Vue.js破浪]——单文件组件(一)
来源:互联网 发布:盘古数据骗局 编辑:程序博客网 时间:2024/06/05 05:41
Vue.js破浪——Vue-Cli生成工程的目录结构详解
前言
单文件组件在大型的应用中能够有很好的模块化效果,使用单页面应用我们肯定离不开构建系统,其中最常用的构建系统就是Webpack和Browserify。在这篇文章中将会解析使用vue-cli生成的文件来学习关于webpack构建系统的相关知识。通过对webpack构建系统的学习,为后面真正使用单文件组件开发应用做铺垫。
目录解析
我们首先看一下使用脚手架生成的webpack构建应用的最简单的目录结构(使用vue init webpack-simple vuecli
构建)
各个文件或文件夹的作用如下:
node_modules
文件夹放的是使用npm下载的依赖模块src
文件夹放的是我们编写的源码及所使用的资源assets
放的是我们需要的资源文件
.babelrc
是babel的配置文件.gitingnore
是git的配置文件,用于指引git应该忽略的文件index.html
是我们网页的主体package-lock.json
记录了已经处理好的依赖模块的相关信息package.json
记录的是整个工程的依赖模块README.md
是工程的介绍文件webpack.config.js
是webpack的配置文件
Webpack配置文件解析
在这么多文件和目录里面最重要的就是Webpack的配置文件也就是webpack.config.js
。关于Webpack的详细讲解可以阅读官方指南。在这里我做简单的解析。
前两行使用的是CommonJs的语法引入模块,分别引入了path
模块用于解析文件路径,和webpack
模块用于解析配置文件。
接下来就是配置部分,可以看到有entry
,output
,module
,resolve
,devServer
,performance
,devtool
等选项,接下来我们会介绍各个选项在配置文件中的作用。
entry
是一个文件的路径,指明了webpack构建的入口,在这个示例中就是./src/main.js
。output
中的一系列选项都是用于指定构建完的文件的存储路径以及参数path
指定构建完成的文件存储的路径publicPath
指定构建完成之后资源存储的初始地址filename
指定构建完成的文件的文件名
module
中列举了一些实现热重载所需要的加载模块resolve
用于指定相关文件关联的编译模块或解析模块devServer
用于配置开发过程中使用的轻量级服务器performance
用于配置是否提供性能相关的警告devtool
用于指定构建后代码的样式,例如是原始的代码还是压缩的代码还是优化后的代码
接着就是当运行环境为生产环境的时候,所用到的配置,例如重新配置devtool
,配置相关的插件等。
下面列出配置的相关代码
var path = require('path')var webpack = require('webpack')module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}
其余文件解析
我们已经把最重要的webpack.config.js文件讲解完了,接下来还有.babelrc
文件和package.json
文件需要讲解 .babelrc
就是babel的配置文件,其配置只是简单的一段
{ "presets": [ ["env", { "modules": false }] ]}
这段配置的意思就是根据环境自动适配预处理器("env"
的含义);只是用ES6默认的模块化系统,不适用如amd,umd等模块化系统({"modules":false}
的含义)
package.json
主要是罗列工程的相关信息,以及各种依赖模块等,当执行npm install
或者npm install --production
的时候会根据这个文件中的依赖模块从仓库中下载依赖模块。 name
,description
,version
,author
,private
就是用于给开发者攥写工程相关信息的。 script
指定当执行dev
或者build
脚本的时候真正运行的脚本 dependencies
用于列举工程在生产环境中的依赖模块 devDepemdencies
用于列举工程在开发环境中的依赖模块
以下是package.json
的相关代码
{ "name": "vuecli", "description": "A Vue.js project", "version": "1.0.0", "author": "***", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^2.3.3" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-env": "^1.5.1", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "vue-loader": "^12.1.0", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", "webpack-dev-server": "^2.4.5" }}
总结
我觉得很多人应该跟我一样一开始在接触CLI工具生成的目录结构的时候一筹莫展,为什么会突然间多了这么多文件,这些文件有什么用,我改一下会发生什么变化。我觉得如果一天不能解决目录结构的疑惑一天就不能放开手脚编写单文件组件应用,所以我花了几天的时间学习了webpack、npm和babel的官方文档,了解了使用构建工具生成工程的基本目录结构,然后再根据我所了解的写下来,在理解了目录结构之后我们就可以编写我们的单文件组件应用了。
其实之前接触这种目录结构真的非常多,Angular2,React甚至Egret都是这种结构,但之前没有横下心学习各种相关的知识,也借这次写博客的契机,学习了一波。其实在前端这个领域,使用构建工具构建的工程目录结构大概都是这样的,所以稍微理解一下目录结构真的受益匪浅。
- [Vue.js破浪]——单文件组件(一)
- Vue.js破浪
- vue.js 单文件组件 .vue文件
- vue单文件组件
- vue 单文件组件 *.vue 组件
- 单文件组件.vue 文件
- vue.js原生组件化开发(一)——组件开发基础
- 【17】vue.js — 组件(模板)
- 关于单文件组件.vue
- 【16】vue.js — 组件
- JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)
- vue.js单文件组件中非父子组件的传值
- vue开发(二)单文件组件开发
- vue组件(一)
- VUE单文件组件之间调用
- VUE.JS——组件基础
- Vue.js——组件入门
- VUE.JS——组件基础
- 云服务器启动tomcat很慢
- 判断ip是否为保留ip
- 《计算机操作系统原理-linux实例分析》_肖竞华_第一章_知识点
- spark是什么,就看看
- 枚举
- [Vue.js破浪]——单文件组件(一)
- eclipse里安装SVN插件
- win10 ubuntu 16.04 双系统安装
- 515. Find Largest Value in Each Tree Row(Java)
- com/fasterxml/classmate/TypeResolver
- 记一次异常停机损坏了orientdb 导致nexus2无法启动
- 在Fragment中嵌套Webview,第一次打开闪屏问题
- 一步一步制作yaffs/yaffs2根文件系统(六)---完善命令行提示符
- Redis设实