前端基础-Vue.js构建一个项目

第12章 构建一个项目

12.0 命令行工具 (CLI)

https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

12.1 初始化项目

安装 cli 命令工具：npm install -g @vue/cli @vue/cli-init

安装成功后，使用 vue -V 命令，查看版本号；

使用 vue init webpack myapp 构建一个名为 myapp 的项目：

Vue 依然使用询问的方式，让我们对项目有一个初始化的信息

• Project name：项目名
• Project description: 项目描述
• Author: 作者
• Vue build：
  • 第一种：配合大部分的开发人员
  • 第二种：仅仅中有runtime
• Install vue-router? 是否安装vue-router
• Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
• Pick an ESLint preser:使用哪种语法规范来检查我们的代码：
  • Standard: 标准规范
  • Airbnb: 爱彼迎规范
• Set up unit test: 设置单元测试
• Setup e2e tests： 设置端对端测试
• Should we run ‘npm install’:要不要帮忙你下载这个项目需要的第三方包
  • 使用npm来下载
  • 使用yarn来下载

To get started:

  cd myapps
  npm run dev   // 使用命令启动项目
  
  -----
  Your application is running here: http://localhost:8080  
  
  打开浏览器，访问 http://localhost:8080  
  看到浏览器的欢迎界面，表示项目运行成功

12.2 项目结构介绍

├── build				webpack打包相关配置文件目录
├── config				webpack打包相关配置文件目录
├── node_modules		 第三方包
├── src					项目源码(主战场)
│   ├── assets			 存储静态资源，例如 css、img、fonts
│   ├── components		 存储所有公共组件
│   ├── router			 路由
│   ├── App.vue			 单页面应用程序的根组件
│   └── main.js			 程序入口，负责把根组件替换到根节点
├── static				可以放一些静态资源
│   └── .gitkeep		 git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc			 配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig		 给编辑器看的
├── .eslintignore	      给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js		 给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore			 给git使用的，用来配置忽略上传的文件
├── index.html			 单页面应用程序的单页
├── package.json		 项目说明，用来保存依赖项等信息
├── package-lock.json	  锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js		  给postcss用的，postcss类似于 less、sass 预处理器
└── README.md			 项目说明文档

12.3 语法检查

注意 ：如果我们在 构建项目时 选择了 Use ESLint to lint your code 那么我们在写代码时必须严格遵守 JavaScript Standard Style 代码风格的语法规则：

• 使用两个空格 – 进行缩进
• 字符串使用单引号 – 需要转义的地方除外
• 不再有冗余的变量 – 这是导致 大量 bug 的源头!
• 无分号 – 这没什么不好。不骗你！
• 行首不要以 (, [, or ```开头
  • 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测！
  • 详情
• 关键字后加空格 if (condition) { ... }
• 函数名后加空格 function name (arg) { ... }
• 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null。
• 一定要处理 Node.js 中错误回调传递进来的 err 参数。
• 使用浏览器全局变量时加上 window 前缀 – document 和 navigator 除外
  • 避免无意中使用到了这些命名看上去很普通的全局变量， open, length, event 还有 name。

说了那么多，看看这个遵循了 Standard 规范的示例文件 中的代码吧。或者，这里还有一大波使用了此规范的项目 代码可供参考。

注意: 如果你不适应这些语法规则,可以在构建项目时不使用 ESLint 的语法检查

12.4 项目代码预览

12.4.1 知识储备

严格模式

http://javascript.ruanyifeng.com/advanced/strict.html

严格模式主要有以下限制。

• 变量必须声明后再使用

• 函数的参数不能有同名属性，否则报错

• 不能使用with语句

• 不能对只读属性赋值，否则报错

• 不能使用前缀 0 表示八进制数，否则报错

• 不能删除不可删除的属性，否则报错

• 不能删除变量delete prop，会报错，只能删除属性delete global[prop]

• eval不会在它的外层作用域引入变量

• eval和arguments不能被重新赋值

• arguments不会自动反映函数参数的变化

• 不能使用arguments.callee

• 不能使用arguments.caller

• 禁止this指向全局对象

• 不能使用fn.caller和fn.arguments获取函数调用的堆栈

• 增加了保留字（比如protected、static和interface）

ES6模块化

http://es6.ruanyifeng.com/#docs/module

总结：

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用；
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口；
• ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";；
• ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块；

12.4.2 代码加载执行

main.js

// 入口文件

// 以es6模块的方式引入 vue APP router 三个模块;
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  // 获取节点对象
  el: '#app',
  // 引入路由
  router,
  // 本实例的私有组件
  components: { App },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: '<App/>'
})

roter/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue 中插件引入语法 
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    // 定义一个路由规则
    {
      path: '/', // 请求路径
      name: 'HelloWorld', // 路由名称标识
      component: HelloWorld //请求此路由时，使用的组件
    }
  ]
})

components/HelloWorld.vue

export default {
  // 模块名字
  name: 'HelloWorld',
  // 组件中 data 数据必须是一个有返回值的方法
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

(main.js->template: '<App/>')替换 (index.html->div#app);

(index.html-><App/>) --> (components: { App })

( components: { App }) --> (import App from './App' -> src/App.vue)

(App.vue -> <router-view/> -> 路由组件) --> (main.js-> router)
========此项决定了页面展示那个组件内容 ========

({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')

(src/components/HelloWorld.vue) --> <router-view/>

12.5 添加自己的路由组件

修改 router/index.js ，添加自己的路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入(导入) 组件
import MyRouter from '@/components/MyRouter'

Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    {path: '/',name: 'HelloWorld', component: HelloWorld },
    // 添加自己的路由及组件
    {
      path:'/myrouter',
      name:'MyRouter',
      component:MyRouter
    }
  ]
})

在 components 文件夹中添加 MyRouter.vue 文件，写自己的组件代码：

<template>
  <div class="mypage">
    {{mydatas}}
  </div>
</template>

<script>
  // 模块化导出
  export default {
    data(){
      return {mydatas:'lksadjflks'}
    }
  }
</script>

<style>
  .mypage{
    width: 200px;
    height: 50px;
    background: pink
  }
</style>

浏览器渲染效果如下：