Vs-code/WebStorm中构建Vue项目的实现步骤_vue.js_

一、使用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 

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

cd  npm install 

5、启动项目

npm run dev 

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

1、在WebStrom中安装vite插件

2、使用vite创建Vue项目

3、配置npm运行环境

演示：

Demo. vue:

App.vue:

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进行组件的默认导出

演示：

Demo1.vue

App.vue代码段：

 到此这篇关于Vs-code/WebStorm中构建Vue项目的实现步骤的文章就介绍到这了,更多相关Vs-code/WebStorm构建Vue内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！