Vs-code/WebStorm中构建Vue项目的实现步骤
更新时间：2022年08月18日 08:10:14 作者：THER1881
本文主要介绍了在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>
4、进入项目目录安装依赖
cd <project name> npm install
5、启动项目
npm run dev
三、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">Add</button>
</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 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Demo from "./components/Demo.vue";
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<Demo/>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
5、Vue3中新增的特性
5.1、组合式API：setup
（1）、是一个函数,可以返回对象,对象的属性和方法可以在模板中直接使用
(2)、所有的组合API函数都在此使用, 只在初始化时执行一次
5.2、初始化函数：ref。作用是初始化组件中使用的变量。语法是：
const 变量名 = ref(初始值)
5.3、构建响应式数据方法：reactive。作用是将数据打包成对象
5.4、Vue3的计算属性：
5.5、Vue3的setup语法糖：不需要使用exports default进行组件的默认导出
<script setup> </script>
演示：
Demo1.vue
<template>
<div id="d1">{{ info }}</div>
<div>{{ count }}</div>
<h2>姓名：{{ obj.name }}</h2>
<h2>性别：{{ obj.gender }}</h2>
<h2>年龄：{{ obj.age }}</h2>
<h2>家属：{{ obj.son }}</h2>
<button type="button" @click="add">Add</button>
</template>
<script>
import {reactive, ref} from 'vue';
export default {
name: "Demo",
setup(){
const count = ref(0)
const info = ref('凤阳')
const obj = reactive({
name: '朱元璋',
gender: '男',
age: 50,
son:{
name: '朱标',
age: 23
}
})
function add(){
count.value = count.value + 1
}
return{
info,
count,
obj,
add
}
}
}
</script>
<style scoped>
#d1{
color:red;
font-size:25px;
}
</style>
App.vue代码段：
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Demo1 from "./components/Demo1.vue";
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<Demo1/>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
到此这篇关于Vs-code/WebStorm中构建Vue项目的实现步骤的文章就介绍到这了,更多相关Vs-code/WebStorm构建Vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
unplugin-svg-component优雅使用svg图标指南
这篇文章主要为大家介绍了unplugin-svg-component优雅使用svg图标指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue + el-tree 实现插入节点自定义名称数据的代码
这篇文章主要介绍了vue + el-tree 实现插入节点自定义名称数据的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能,下面这篇文章主要给大家介绍了关于Vue实现当前页面刷新的4种方法,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了flutter使用tauri实现一个一键视频转4K软件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
这篇文章主要介绍了解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Ant Design 是一个开源库，可让您创建吸引人的响应式网站。如果您想使用经过充分测试且易于学习的框架，那么它是您下一个项目的绝佳选择，这篇文章主要介绍了如何在 Vue 3 中使用 Ant Design,需要的朋友可以参考下2023-04-04
Vue 是一套用于构建用户界面的渐进式框架，和React，都自称自己只关注视图层，全家桶对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架，本文给大家分享Vue全家桶入门基础教程，感兴趣的朋友一起看看吧2021-05-05
Vue3中的setup是一个新的生命周期函数,它可以用来代替组件中的 data和一些生命周期函数（如created和beforeMount）,这篇文章主要介绍了vue3如何使用setup代替created的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue 如何根据条件判断属性的添加和去除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
这篇文章主要介绍了vue Treeselect 树形下拉框:获取选中节点的ids和lables操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论