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

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

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

npm install -g @vue/cli

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

vue create 项目名称

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

npm run serve

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>

在Vs-code/WebStorm中构建Vue项目_第1张图片
在Vs-code/WebStorm中构建Vue项目_第2张图片

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

cd <project name>
npm install

5、启动项目

npm run dev

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

1、在WebStrom中安装vite插件

在Vs-code/WebStorm中构建Vue项目_第3张图片

在Vs-code/WebStorm中构建Vue项目_第4张图片

2、使用vite创建Vue项目

在Vs-code/WebStorm中构建Vue项目_第5张图片

在Vs-code/WebStorm中构建Vue项目_第6张图片
3、配置npm运行环境

在Vs-code/WebStorm中构建Vue项目_第7张图片
在Vs-code/WebStorm中构建Vue项目_第8张图片
演示:

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>

App.vue:

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

你可能感兴趣的:(vue.js,webstorm,前端)