Vue入门（一）：Vue的安装与引入

MyFlowing

已于 2023-02-25 23:26:02 修改

阅读量193

点赞数

文章标签： vue.js typescript 前端

于 2023-02-21 21:07:26 首次发布

本文链接：https://blog.csdn.net/my_9810/article/details/129150169

版权

1. Vue的安装

npm install -g yarn

yarn add -D vite

yarn init -y

yarn add vite -D

yarn add vue

2. Vue的手动引入

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue!</title>
    <script type="module" src="./src/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

index.js

//引入Vue
//这里引入的vue默认不支持通过template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler";

//创建一个根组件
const App = {
    data() {
        return {
            message: "Vueeee!"
        }
    },
    template: "<h1>{{message}}</h1>"
}

//创建应用挂载到页面
createApp(App).mount("#app")

package.json

{
  "devDependencies": {
    "vite": "^4.1.3"
  },
  "name": "learn_vue_01",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vue": "^3.2.47"
  },
  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
  }
}

3. 运行

yarn dev

4. 使用 .vue 文件

yarn add -D @vitejs/plugin-vue

3. Vue项目的自动生成

1. 创建vue项目

yarn create vue

或

npm init vue@latest

2. 配置vue项目

yarn

3. 运行项目

yarn dev

4. Vue单组件文件的配置：vite.config.js

import vue from "@vitejs/plugin-vue"

export default {
    plugins:[vue()]
}

MyFlowing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门（一）：Vue的安装与引入

Vue入门：Vue的安装与引入
复制链接

扫一扫

Vue入门（一）：Vue的安装与引入

1. Vue的安装

2. Vue的手动引入

3. Vue项目的自动生成

“相关推荐”对你有帮助么？