Vue——快速上手学习笔记

创建一个vue应用

1、确保安装了最新版本的Node.js，并且你的当前工作目录正式打算创建项目的目录。在命令行中运行一下命令

npm init vue@latest

这一指令将会安装并执行 create-vue ，它是Vue官方的项目脚手架。

后续会出现诸如typescript和测试支持之类的可选功能提示

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd <your-project-name>
> npm install
> npm run dev

当应用需要发布到生产环境时，需要运行：

npm run build

通过CDN使用vue

可以借助script标签直接通过CDN来使用vue

<script src="https://unpkg.com/vue@/dist/vue.global.js"></script>

tips:

1. 除了unpkg,也可以使用任何提供npm包服务的CDN。

2. 通过CDN使用Vue时，不涉及“构建步骤”。可以用于在增强静态的HTML或与后端框架集成。但是，将无法使用单文件组件（SFC) 语法。

   使用全局构建版本

   全局构建版本的例子：

   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   
   <div id = "app">
       {{message}}
   </div>
   
   <script>
   	const {createApp} = Vue
       
       createApp({
           data(){
               return{
                   message:'hello Vue!'
               }
           }
       }).mount('#app')
   </script>
   

   使用ES模块构建版本

   <div id="app">{{ message }}</div>
   
   <script type="module">
     import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
     
     createApp({
       data() {
         return {
           message: 'Hello Vue!'
         }
       }
     }).mount('#app')
   </script>
   

   这里使用到了

拆分模块

例如：

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

如果直接在浏览器中打开index.html，你会发现它抛出一个错误，因为ES模块不能通过file：//协议工作。为了让其工作，你需要使用本地HTTP服务器通过http://协议提供index.html

要启动本地的http服务器，需要先安装Node.js，然后通过命令行在HTML文件所在文件夹下运行npx serve 。也可以使用其他基于正确的MIME类型服务静态文件的http服务器。

无需构建的组合式API用法