12 手写配置启动一个 vue2 项目

LIYI

发布于 2020-01-14 15:57:43

1.1K0

发布于 2020-01-14 15:57:43

手动创建项目，添加 vue 插件

学习 vue2.0 还有没有意义？

2019年10月5日，vue 团队发布了 Vue3.0 预览版源码，预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

有人说，vue3就要来了，学习vue2还有什么意义？

首先，vue3目前仅是开放了未100%完成的源码，目前的版本并非最终稳定版本。

其次，从社区和媒体讨论的声音看，vue3从发布到全部替换vue2，还需要很长的完善过程。

最后，企业里已经使用vue2开发的项目，不能无人维护。即使vue3正式发布了，在很久一段时间里，2 与 3 相信也是长期并存的。

手动创建项目，添加 vue 插件

在早期网页开发时代，一个页面有什么，用了什么，都是很清晰的。在工程化开发的今天，这一点仍然可以做到。前提是，要对工程化所用的插件每个都做到门清。

接下来我们开始手动创建一个 vue 项目，不使用 vue cli等脚手架工具。

首先，使用mkdir命令创建新目录 simple-vue-project，做为项目目录。

在该目录下执行指令：

yarn add vue

通过上述指令，会在当前目录下自动生成node_modules目录，并把vue插件下载放置其内。使用vue开发项目，vue插件是必不可少的。

除了node_modules，自动生成了package.json文件。看一下，现在package.json文件的内容是如此简单：

{
  "dependencies": {
    "vue": "^2.6.11"
  }
}

vue版本为2.6.11。版本很重要，很多时候照别人的教程做，效果与别人不一样，就是因为版本不一致的缘故。

vue插件是vue项目的核心。vue官方文档上所有的组件、接口之所有能够发挥作用，全依赖vue插件在背后工作。vue插件将非html、js语法转化为原生的html、js语法，因为浏览器只能读懂这些原生语言。

关于版本号

^2.6.11这个版本号代表什么意思？

一定代表2.6.11吗？不是的。

一个常规版本号一般包括三部分：major|minor|patch。版本号前面添加了修饰符之后，具体语义如下：

所以^2.6.11这种版本描述，严格度是最低的。需要将其换成~2.6.11或者直接将修饰符去掉，使用确定版本。

{
  "dependencies": {
    "@vue/cli-service": "4.1.2",
    "vue": "2.6.11",
    "vue-template-compiler": "2.6.11"
  }
}

使用版本号明确的版本，可以避免出现七七八八的 Bug。

准备工程化编译，建造必须的文件

package.json

扩展package.json配置：

{
  "name": "simple-vue-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

package.json中的scripts，是一个任何命令对象列表。此处的script，允许开发者用一个较短的名称，指代一句终端命令及参数。预定义好命令名称，方便在开发中使用。

页面模板public/index.html

建造模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

App.vue

建造第一个vue组件：

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data: () => ({
    message:'hi'
  }),
};
</script>

main.js

还有主文件：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

在主文件中引用了App.vue组件，并且完成vue程序的初始化。

vue.config.js

修改vue.config.js，添加第一个编译页面：

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  }
}

开始编译：

yarn serve

此处server是package.json中的script，相当于执行vue-cli-service serve。

处理编译错误

安装 vue-cli-service

发生了第一个错误：

/bin/sh: vue-cli-service: command not found

直接使用yarn add vue-cli-servicep安装，是不会成功的。应该使用：

yarn add @vue/cli-service

vue插件路径以@vue/始，替换插件名称中的vue-。其它vue插件也是类似的。

在这里，@vue/cli-service插件安装了一个名为 vue-cli-service 的命令。安装后，可以在 npm scripts中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问该命令。

安装vue-template-compiler

遇到了第二个错误：

Error: Cannot find module 'vue-template-compiler/package.json'

顾名思义，vue-template-compiler是用于编译vue template的插件。据官方文档解释，此包用于编译Vue 2.0模板，以避免运行时编译开销和内容安全策略方面的限制。在大多数情况下，应该将它与vue-loader一起使用，只有在手动编写具有特定需求的构建工具时才需要单独使用它。

解决方法：

vue-template-compiler

再次运行yarn serve，成功了：

控制台输出：

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.44.53:8080/

浏览器：

prelaod 是干什么的？

访问http://localhost:8080/，得到页面源码为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link href="/js/chunk-vendors.js" rel="preload" as="script"><link href="/js/index.js" rel="preload" as="script"></head>
  <body>
    <div id="app"></div>
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/index.js"></script></body>
</html>

在这里，为什么在head与body里加载了同样的js地址？

<link> 元素的 rel 属性的属性值preload，是为了实现资源的预加载。凡是加此属性的script资源，即被表明是在页面加载完成之后就被立即需要的，所以请浏览器立即加载；但是这种预加载又不能阴滞页面正常的加载与渲染流程。这是一个提升页面性能的属性。

使用 inspect 检查项目配置

vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。全局的 vue 同样提供了 inspect 命令，vue inspect相当于 vue-cli-service inspect。

执行命令：

vue inspect > vue-config-output.txt

即可在当前目录下生成vue-config-output.txt文件。该文件大约有 1300 行。

vue运行时版本与编译版本的差异，及别名

webpack的配置及项目中用到相关插件的配置，是相当复杂的，大多数开发者并不需要深究每一个配置的细节及原理。为此vue2在webpack的基础之上，创建vue.config.js，目的在于简化项目配置的繁琐细节。

如前所示，即使我们仅是在vue.config.js中配置了 10 行代码，最终实际发挥作用的配置却有 1300 行之多。这是因为vue2封装了诸多默认配置。在项目开发中，了解这些默认配置也是很多必要的，对于已经默认启用的配置，就没有必要再手动配置一次了。

例如，查看vue-config-output.txt文件文件，有这几行配置：

resolve: {
 alias: {
  '@': '/work/2020/vue-and-go-example/simple-vue-project/src',
  vue$: 'vue/dist/vue.runtime.esm.js'
},

这是两个默认的别名。第一个@，使开发者在template中可以直接使用@指代src目录；第二个vue$，指向了'vue/dist/vue.runtime.esm.js'，这表明项目仅启动了运行所需的vue运行时版本。运行时版本相比完整版，体积要小约 30%。

如果开发者的代码中有这样的代码：

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

只需要运行就足够了。而如果有这样的代码：

new Vue({
  template: '<div>{{ hi }}</div>'
})

就需要编译器，因为template需要在运行时编译。

基于构建工具使用的ES Module 版本有两个：

完整版：vue.esm.js
运行时版本：vue.runtime.esm.js

注意，这两个文件都可以在node_modules/vue/dist目录下找到。

如果要想在运行时动态编译代码，则需要修改vue.config.js配置为：

chainWebpack: config => {
 // 添加别名
 config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js');
}

否则便不需要变化。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200107

参考资料

https://blog.csdn.net/weixin_41312022/article/details/86662578
https://cli.vuejs.org/zh/guide/cli-service.html#使用命令
https://www.npmjs.com/package/vue-template-compiler
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
https://blog.csdn.net/weixin_43330537/article/details/101420650

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-01-07，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自艺述论微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度