VUE2 第六天学习--- vue单文件项目构建

时间 2019-11-17

标签 vue2 vue 第六学习文件项目构建繁體版

原文原文链接

阅读目录javascript

VUE2 第六天学习--- vue单文件项目构建

VUE2 第六天学习--- vue单文件项目构建css

VUE单文件组件
在Vue项目中，而后使用 new Vue({el: '#container' }), 在每一个页面内指定一个容器元素。使用Vue.component来定义全局组件，这种方式在小规模项目中还能够，可是在项目中有以下缺点：
1. 全局定义：强制要求每一个component中的命名不能重复。
2. 字符串模板：缺少语法高亮，在HTML有多行的时候，须要用到丑陋的 \
3. 不支持css，意味着HTML和javascript组件化时，css明显被遗漏。
4. 没有构建步骤，限制只能使用HTML和ES5 Javascript，而不能使用预处理器。
.vue 单文件组件能够解决上面的全部问题，而且还可使用 webpack等构建工具。html

.vue文件是一个自定义的文件类型，用类HTML语法描述一个Vue组件。每一个 .vue文件包含三种类型的顶级语言块 <template>,<script>,和 <style>,以下代码：vue

<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属性。好比以下代码：java

<style lang='stylus'>
  /* stylus代码 */
</style>

语言块
<template>
默认语言： html
每一个.vue文件最多包含一个 <template>块
内容将被提取为字符串，将编译并用做Vue组件的template选项。node

<script>
默认语言： js(在检测到 babel-loader 或 buble-loader 配置时自动支持ES2015)
每一个.vue文件最多包含一个<script>块。
该脚本在类CommonJS环境中执行，也能够经过require()其余依赖，在ES2015支持下，可使用import 和 export 语法。
脚本必须导出 Vue.js 组件对象。也能够导出由 Vue.extend()建立的扩展对象。可是普通对象将会更好。webpack

<style>
默认语言：css
一个 .vue文件能够包含多个 <style> 标签。
默认状况下，将会使用 style-loader 提取内容，并经过 <style>标签动态加入文档的<head>中，也能够配置将全部style提取到单个的css文件中。git

项目构建：
一：安装项目依赖
npm install --save vue 默认安装最新版vue
npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-serveres6

提示： npm install --save 和 npm install --save-dev的区别，--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，--save-dev 是你开发时候依赖的东西，--save 是你发布以后还依赖的东西。*github

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 运行命令。

git上查看demo