Vue3 项目打包

打包 Vue 项目使用以下命令：

cnpm run build

执行以上命令，输出结果如下：

执行完成后，会在 Vue 项目下会生成一个 dist 目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

如果直接双击 index.html 打开浏览器，页面可能是空白了，想要修改下 index.html 文件中 js、css 路径即可。

例如我们打开 dist/index.html 文件看到 css 和 js 文件路径是绝对路径

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
...

我们把 js、css 文件路径修改为相对路径：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>
...

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

Vue3 目录结构

使用 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode等）中打开该目录，结构如下所示：

命令行工具 vue-cli（runoob-vue3-test）：

Vite（runoob-vue3-test2）

目录解析

接下来，我们以 runoob-vue3-test2 为例，打开目录下的 src/APP.vue 文件，代码如下（解释在注释中）：

## src/APP.vue 文件代码

<!-- 展示模板 -->\
<template>\
  <img alt="Vue logo" src="./assets/logo.png" />\
  <HelloWorld msg="Hello Vue 3.0 + Vite" />\
</template>\
<!-- Vue 代码 -->\
<script>\
/* 从 src/components/HelloWorld.vue 中引入 HelloWorld 组件 */\
import HelloWorld from './components/HelloWorld.vue'\
\
export default {\
  name: 'App',\
  components: {\
    HelloWorld\
  }\
}\
</script>

接下来我们可以尝试修改下初始化的项目，将 src/APP.vue 修改为以下代码：

src/APP.vue 文件代码

<template>\
  <img alt="Vue logo" src="./assets/logo.png" />\
  <HelloWorld msg="欢迎来到Vue3！" />\
</template>\
\
<script>\
import HelloWorld from './components/HelloWorld.vue'\
\
export default {\
  name: 'App',\
  components: {\
    HelloWorld\
  }\
}\
</script>

打开页面 http://localhost:3000/ ，一般修改后会自动刷新.

Vue3 起步

刚开始学习 Vue，不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。

Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下：

const app = Vue.createApp({ /* 选项 */ })

传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。

一个简单的实例：

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。

一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到

中。

接下来写我们开始的第一步，从 Hello Vue!! 的代码学起。

Vue 3.0 例子

<div id="hello-vue" class="demo"> {{ message }} </div>

<script> 
    const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } 
    Vue.createApp(HelloVueApp).mount('#hello-vue') 
</script>

以上实例中，我们先在 HTML 页面中引入 Vue 的 JS 文件：

<script src="https://unpkg.com/vue@next"></script>

HTML 页面中有一个 div 元素:

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到

<div id="hello-vue"></div>

{{ }} 用于输出对象属性和函数返回值。

{{ message }} 对应应用中 message 的值。

data 选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

const app = Vue.createApp({\
  data() {\
    return { count: 4 }\
  }\
})\
\
const vm = app.mount('#app')\
\
document.write(vm.$data.count) // => 4\
document.write("<br>")\
document.write(vm.count)       // => 4\
document.write("<br>")\
// 修改 vm.count 的值也会更新 $data.count\
vm.count = 5\
document.write(vm.$data.count) // => 5\
document.write("<br>")\
// 反之亦然\
vm.$data.count = 6\
document.write(vm.count) // => 6

以上实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

方法

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：

const app = Vue.createApp({\
  data() {\
    return { count: 4 }\
  },\
  methods: {\
    increment() {\
      // `this` 指向该组件实例\
      this.count++\
    }\
  }\
})\
\
const vm = app.mount('#app')\
\
document.write(vm.count) // => 4\
document.write("<br>")\
vm.increment()\
\
document.write(vm.count) // => 5

既然学习了就不要停下来，要不怎么对得起自己得时间，有志之人立常志

Vue3学习笔记 - 开始