丁丁书屋

Appearance

Vue 简介 ​

Vue（发音为/vjui/，类似 view）是一款用于构建用户界面的渐进式 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 的两个核心功能：

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系；
  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM；

作者：尤雨溪 Evan You

Vue 快速体验 ​

非工程化的方式

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>--> <!-- vue 2-->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> <!-- vue 3-->
    <script>
        window.onload = function() {
            // Vue 3
            const app = Vue.createApp({
                setup() {
                    // Vue 会对这里的数据进行代理，任何对这里的数据修改都会触发视图更新
                    let message = "hello"
                    let headLine = 'vue'
                    let colorStyle =  { "background-color": 'aqua' }
                    function changeMessage() {
                        message = "hello world"
                    }
                    function changeColor() {
                        colorStyle = { "background-color": 'red' }
                    }
                    function alertMessage() {
                        alert(message)
                    }
                    return { message, headLine, colorStyle, changeMessage, changeColor, alertMessage }
                }
            });

            app.mount('#app');
        }
    </script>
</head>
<body>
    <div id="app">
        <h1 v-text="message" v-bind:style="colorStyle">Hello vue!</h1>
        <h1>{{message}}</h1>
        <button @click="alertMessage">弹出message</button>
    </div>
</body>
</html>

Uniapp ​

创建 vue2 项目

确保使用 vue/cli 4 创建模板，否则可能会出现 webpack 版本错误

bash
npx @vue/cli@4 create -p dcloudio/uni-preset-vue my-new-project -m npm

使用 @dcloudio/uvm 管理编译器的版本

bash
npx @dcloudio/uvm@latest

运行、发布 uni-app

bash
npm run dev:%PLATFORM%

常见问题 ​

脚手架创建 vue 项目报错 ​

Error: command failed: pnpm install --reporter silent --shamefully-hoist

现象：依靠 pnpm 使用脚手架创建 vue 项目时，出现了 command failed: pnpm install --reporter silent --shamefully-hoist 报错

原因：使用的文件系统不支持硬链接

解决：通过 vue create 命令的可选项：-m, --packageManager 在安装依赖时使用指定的 npm 客户端

vue create xxx -m npm

脚手架镜像源过期 ​

现象：使用的 vue@cli 版本是 4, 在使用命令创建项目时 vue create demo 或 npx @vue/cli@4 create demo 出现错误

Failed to get response from https://registry.npm.taobao.org/vue-cli-version-marker

原因：vue@cli使用了自己定义的镜像，淘宝镜像源过期了

解决：npm全局目录下面的@vue\cli\lib\util\registries.js，修改淘宝镜像源为新的 https://registry.npmmirror.com