Vue起手式_sandbox-vue-优快云博客

本文介绍了Vue的起手式，包括Vue的历史、项目搭建方法，重点讲解了vue.js和vue.runtime.js的使用及它们的区别。通过创建简单项目展示了Vue实例的创建，分析了完整版和非完整版Vue的实现原理，并讨论了SEO友好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起手式

Vue中文文档、工具@vue/cli文档

Vue的历史

vue、Angular.js、React.js前端三大主流框架。
MVC中的V是Vue的重点，M和V则被简化。
Vue和vue.js没有区别，vue就是vue.js的简称。
Vue你可以认为是框架也可以说是库，Vue中文英文文档都是尤雨溪写的。

15年的1.0版本Vue自称是MVVM框架，不是MVC是MVVM，不过这已经成历史了。现在Vue是MV * 框架,意思就是你说MVC、MVVM都行。但是Vue升级到2.0后，它虽然看起来是MVVM框架，但实际不是MVVM框架了。Vue3直接抄袭React。
Vue作者尤雨溪，主要作品: Vue、Vue Router、Vuex、@vue/cli(主要维护者是蒋豪群)
Vue2版本vue.runtime.min.js Vue3版本vue.runtime.global.prod.js

目标一: 项目搭建

方法一:使用@Vue/cli

使用@vue/cli搭建Vue项目
@Vue/cli 是Vue的创建初始化工具，webpack的升级版，帮你把所有的webpack loader、webpack plugin配好了。利用@Vue/cli，不用学webpack也能用Vue。

步骤 🔍@vue/cli文档
1.打开终端

cd ~/Desktop/
yarn global add @vue/cli@4.1.0-beta.0
vue --version
vue create vue-demo //创建目录vue-demo

2.设置配置(该配置只适合学习，如果是真实项目请自行斟酌选项)
选错用control+c中断重来
没有截图的使用默认选项。
多选:用空格键选中或取消 注意: 不要勾选Choose Vue version!
在这里插入图片描述

3.运行

cd vue-demo
yarn serve
中断control+c，然后把生成的目录vue-demo拖进来
open .
yarn serve //打开本地预览服务器

在这里插入图片描述

现在就可以使用Vue了，还可以用codesandbox.io。
第1种方式:用命令行创建目录，它会自动帮你安装依赖。
第2种方式:用codesandbox.io。
不要登录，点击“create sandbox”，选择创建vue沙盒。
下载至本地:点击File-> Export to ZIP 并解压缩

方法二:自己从零搭建Vue项目

目标二.vue.js和vue.runtime.js的使用

做一个简单的"+1"项目
如何使用Vue实例？

App.vue
<template>
  <div id="app">
    {
  {n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
     
  name: 'App',
  data(){
      //data是函数
    return {
     
      n:0
    }
  },
  methods:{
     //methods是对象