vue3+nodejs项目记录

新建文件目录

app.vue代码

<template>
  <div class="demo">
    <div class="text">Count: {{state.count}}</div>
    <button class="btn" @click="onClick">Add</button>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';
  const state = reactive({
    count: 0
  });
  const onClick = () => {
    state.count ++;
  }
</script>

<style>
.demo {
  width: 200px;
  padding: 10px;
  box-shadow: 0px 0px 9px #00000066;
  text-align: center;
}
.demo .text {
  font-size: 28px;
  font-weight: bolder;
  color: #666666;
}
.demo .btn {
  font-size: 20px;
  padding: 0 10px;
  height: 32px;
  min-width: 80px;
  cursor: pointer;
} 
</style>

src/index.js入口 代码

import { createApp } from 'vue';
import App from './app.vue';

const app = createApp(App);
app.mount('#app');

第三步 npm init
第三步 npm i –save vue
这里源码代码依赖是 Vue.js 的官方源码库，这时候会自动增加依赖声明到 package.json 文件的 dependencies 字段里。
以下是安装项目开发过程中依赖的 npm 模块：

npm i --save-dev css-loader mini-css-extract-plugin vue-loader webpack webpack-cli

这里是 Webpack 编译 Vue.js 3 代码所需要的开发依赖，这时候也会自动新增依赖声明到 package.json 文件的 devDependencies 字段里，跟源码的依赖区分开来。