• 在Vs-code/WebStorm中构建Vue项目

    一、使用Vue脚手架(vue-cli)构建Vue项目

    1、打开cmd安装或升级Vue脚手架

    npm install -g @vue/cli

    • 1

    2、进入工作目录创建Vue项目

    vue create 项目名称

    • 1

    3、进入项目目录，启动项目

    npm run serve

    • 1

    4、项目目录用处：

    4.1、public目录：静态资源文件夹.index.html是vue项目启动的首页

    4.2、src目录：源码文件夹

    （1）、 assets目录：静态资源、测试数据

    （2）、components目录：存放Vue组件(组件扩展名是.vue)

    （3）、App.vue组件：主组件(启动组件)

    （4）、main.js文件：核心文件。使用App.vue创建Vue组件,将该组件挂载到index.html的div上

    二、使用Vite构建工具构建Vue项目

    1、打开要创建项目所存放的文件位置

    在这里插入图片描述

    2、在创建项目的文件夹，打开cmd窗口

    在这里插入图片描述

    3、之后执行下面这行命令

    npm init vite-app <project-name>

    • 1

    在这里插入图片描述
    在这里插入图片描述

    4、进入项目目录安装依赖

    cd <project name>
npm install

    • 1
    • 2

    5、启动项目

    npm run dev

    • 1

    三、WebStorm中创建Vue项目(使用Vite构建工具)

    1、在WebStrom中安装vite插件

    在这里插入图片描述

    在这里插入图片描述

    2、使用vite创建Vue项目

    在这里插入图片描述

    在这里插入图片描述
    3、配置npm运行环境

    在这里插入图片描述
    在这里插入图片描述
    演示：

    Demo. vue:

    <template>
<div id="d1">
  {{ info }}
div>
  <div>
    {{ count }}
  div>
  <button type="button" @click="add">Addbutton>
template>

<script>
export default {
  name: "Demo",
  data(){
    return{
      info:'凤阳',
      count:0
    }
  },
  methods:{
    add(){
      this.count++
    }
  }
}
script>

<style scoped>
#d1{
  color:red;
  font-size: 25px;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    App.vue:

    <script setup>
// This starter template is using Vue 3