人肉脚手架搭建vue项目！手把手教！

conquer_galaxy

已于 2023-05-04 02:17:46 修改

阅读量58

点赞数

文章标签： vue.js javascript 前端

于 2023-03-27 00:45:56 首次发布

本文链接：https://blog.csdn.net/conquer_galaxy/article/details/129787337

版权

进入一个文件夹终端执行以下命令：

npm init -y
npm install vite --save-dev
//注意以上的命令不要写成了npm install vite --save -dev 
//--save和-dev之间不要有空格！！！
npm install vue --save

这时package.json文件夹中已经是像下面这样了：

{
  "name": "hello_vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.2.1"
  },
  "dependencies": {
    "vue": "^3.2.47"
  }
}

然后在package.json文件中添加配置以下内容：

  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
  },

写一个js文件和html文件

index.js

//引入Vue
//这里引入的vue默认不支持通过template属性来设置模板
// import { createApp } from "vue"
import { createApp } from "vue/dist/vue.esm-bundler.js"
//创建一个根组件
const App = {
    data() {
        return {
            message: "我爱Vue!"
        }
    },
    template: "<h1>{{message}}</h1>"
}
//创建应用挂载到页面
createApp(App).mount("#app")

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script type="module" src="./src/index.js"></script>
</head>

<body>
    <div id="app"></div>
</body>

</html>

然后在终端运行：npm run dev
可以看到运行成功：