VUE2 第六天学习--- vue单文件项目构建
2017-05-09 23:13 龙恩0707 阅读(4939) 评论(4) 编辑 收藏 举报阅读目录
VUE2 第六天学习--- vue单文件项目构建
VUE单文件组件
在Vue项目中,然后使用 new Vue({el: '#container' }), 在每个页面内指定一个容器元素。使用Vue.component来定义全局组件,这种方式在小规模项目中还可以,但是在项目中有如下缺点:
1. 全局定义:强制要求每个component中的命名不能重复。
2. 字符串模板:缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的 \
3. 不支持css,意味着HTML和javascript组件化时,css明显被遗漏。
4. 没有构建步骤,限制只能使用HTML和ES5 Javascript,而不能使用预处理器。
.vue 单文件组件可以解决上面的所有问题,并且还可以使用 webpack等构建工具。
.vue文件是一个自定义的文件类型,用类HTML语法描述一个Vue组件。每个 .vue文件包含三种类型的顶级语言块 <template>,<script>,和 <style>,如下代码:
<template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>
vue-loader 会解析文件,提取每个语言块,通过loader处理,最后将他们组成一个CommonJS模块。module.exports出一个Vue.js组件对象。
vue-loader 支持使用非默认语言,比如css预处理器,预编译的HTML模板语言,通过设置语言块的lang属性。比如如下代码:
<style lang='stylus'> /* stylus代码 */ </style>
语言块
<template>
默认语言: html
每个.vue文件最多包含一个 <template>块
内容将被提取为字符串,将编译并用作Vue组件的template选项。
<script>
默认语言: js(在检测到 babel-loader 或 buble-loader 配置时自动支持ES2015)
每个.vue文件最多包含一个<script>块。
该脚本在类CommonJS环境中执行,也可以通过require()其他依赖,在ES2015支持下,可以使用import 和 export 语法。
脚本必须导出 Vue.js 组件对象。也可以导出由 Vue.extend()创建的扩展对象。但是普通对象将会更好。
<style>
默认语言:css
一个 .vue文件可以包含多个 <style> 标签。
默认情况下,将会使用 style-loader 提取内容,并通过 <style>标签动态加入文档的<head>中,也可以配置将所有style提取到单个的css文件中。
项目构建:
一: 安装项目依赖
npm install --save vue 默认安装最新版vue
npm install --save-dev webpack webpack-dev-server 安装webpack,webpack-dev-server
提示: npm install --save 和 npm install --save-dev的区别,--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则添加到 package.json 文件 devDependencies 键下,--save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。*
npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel,babel的作用是将es6的语法编译成浏览器认识的语法es5
npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件,.vue后缀的文件
npm install --save-dev css-loader style-loader stylus-loader 用来解析css
提示:css-loader 和 style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
npm install --save-dev url-loader file-loader 用于打包文件和图片
npm install --save-dev vue-router 安装路由
二:项目目录结构如下:
demo # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- src # 项目的文件包
| | |--- assets # styles(样式),img(图片)的目录文件
| | |--- components # 一些组件的目录,比如 header.vue 等
| | |--- views # 存放单个页面所有vue文件
| | |--- App.vue # 项目的入口文件
| | |--- index.js # 实例化的js入口文件
| | |--- routes.js # 路由配置文件
| |---
| |--- .babelrc # 支持es6
| |--- .gitignore
| |--- README.md
| |--- index.html # 首页入口文件
| |--- package.json
| |--- webpack.config.js # 配置文件
三:项目运行
执行 webpack 打包;
执行 webpack-dev-server 启动服务器;
四:转换命令
把 webpack 和 webpack-dev-server 命令转成 npm 命令;需要安装 cross-env 命令如下:
npm install cross-env --save-dev
然后在package.json 文件添加
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "webpack"
现在可以使用 npm run dev 运行命令。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
2015-05-09 毕业了五年了--- 人生感想