vue cli

1. 安装
   npm install -g @vue/cli @vue/cli-service-global

2. 切换到vue 当前目录运行

   • vue serve
   • vue serve XXX.vue //指定的文件

3. Vue.js 添加到项目中主要有四种方式：

   • 在页面上以CDN 包的形式导入。
     -下载 JavaScript 文件并自行托管。
     -使用npm安装它。
     -使用官方的CLI来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

4. {{}} 标签对标里

   {{message}}

   v-text 标签内

   v-html 有包含html标签

   v-on:click="" 缩写 @click=""
   v-model(radio,textarea,input,select,checkbox)
   v-bind 用于处理html标签的动态属性，即动态赋值。

5. 在运行 Vue 项目的时候，npm run serve(vue3.0) 和 npm run dev(vue2.0) 的区别就在于 vue-cli 脚手架的版本
   查看packwage.json文件
   

6. vue init webpack xxx(名称)命令，不管脚手架的版本是2.x还是3.x都会按照2.x的模板构建项目，想使用3.x的模板，构建项目的时候要使用vue create xxx(名称)

7. 先运行vue create xxx(名称) 创建项目，再运行 npm run serve （npm run build）打包项目

8. const app = Vue.createApp({
   data() {
       return {
           message: '666'
       }
   },
   template: "
   {{message}}
   "
   })
   app.mount("#app")

   ```javascript vue2
   var app = new Vue({
   el: '#app',
   data: {
   message: '666',
   },
   template: '<h2>{{message}}</h2>',
   });

9. 全局变量与局部变量

   Vue.component('my-component-name', {
   // ... 选项 ...
   })

   
   var ComponentA = { /* ... */ }
   var ComponentB = { /* ... */ }
   var ComponentC = { /* ... */ }
   //然后在 components 选项中定义你想要使用的组件：
   new Vue({
   el: '#app',
   components: {
   'component-a': ComponentA,
   'component-b': ComponentB
   }
   })

99,package.json,运行npm install

##

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。例如，如果你想把一个 Vue 应用挂载到 
，应该传入 #app：
与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是根组件实例。

![](http://www.yxqy.vip/wp-content/uploads/2021/11/20211221124347.png)![](http://www.yxqy.vip/wp-content/uploads/2021/11/201821085317585.png)