nextJS和vueJS及Material-UI 简易搭建

小咪咪 2023-02-13 03:55 3阅读 0赞

1.手动搭建nextJS  
第一步：初始化一个package.json  
npm init  
第二步：安装next.js  
npm install --save next react react-dom  
第三步：配置启动命令 package.json插入

"scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start"
      }

启动：npm run dev  
第四步：写首页，先跑起来。  
1.新建pages/index.js  
2.录入 export default ()=> start ok  
注：因为next.js将pages目录作为路由页面，已经全局处理过react，所以我们的页面内，无需再额外引入react，即可使用react的语法。

2.使用create-next-app安装搭建nextjs  
第一步：全局安装create-next-app  
npm i -g create-next-app  
第二步：创建项目  
npx create-next-app test  
注：此命令会自动帮我们安装next react react-dom，并创建好目录  
第三步：启动运行 npm run dev

3. 搭建VUE环境：安装vue-cli（全局安装vue-cli） 命令：npm install vue-cli -g

创建vue项目：输入命令：vue init webpack vue\_demo（创建名字为‘vue\_demo’的文件夹）

然后进入此文件夹：cd vue\_demo

然后手动下载：npm install

最后运行程序：npm run dev

4.搭建React UI框架：安装 Material-UI —— 世界上最受欢迎的 React UI 框架

若想安装并写入您的 package.json 依赖包，请运行以下命令：

// 用npm安装
    npm install @material-ui/core
    
    // 用yarn安装
    yarn add @material-ui/core
    
    // 通过 npm
    npm install @material-ui/icons
    
    // 通过 yarn
    yarn add @material-ui/icons

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关搭建简易springBoot框架

最近项目不是很忙,闲暇之余自己在慢慢的搭建框架,springBoot真香!!! 1.创建项目![在这里插入图片描述][watermark_type_ZmFuZ3poZ

心已赠人/ 2023年06月10日 07:27/ 0 赞/ 47 阅读

相关 docker搭建简易kafka

本章主要是为了记录部署指令搭建zookeeper 运行容器 docker run -d \ -p 2181:2181 \ -v /Users

绝地灬酷狼/ 2023年06月06日 12:05/ 0 赞/ 1 阅读

相关 nextJS和vueJS及Material-UI 简易搭建

1.手动搭建nextJS 第一步：初始化一个package.json npm init 第二步：安装next.js npm install --save nex

小咪咪/ 2023年02月13日 03:55/ 0 赞/ 4 阅读

相关 Golang搭建简易web应用

前言 > golang作为一门敏捷开发的编程语言，自身就支持高并发优良特性，这无疑被无数编程者所钟爱，今天就来讲讲golang如何搭建web应用。搭建环境 >

快来打我*/ 2022年11月06日 05:49/ 0 赞/ 223 阅读

相关 Django搭建简易博客

Django简易博客，主要实现了以下功能 1. 连接数据库 2. 创建超级用户与后台管理 3. 利用django-admin-bootstrap美化界面 4. tem

客官°小女子只卖身不卖艺/ 2022年07月19日 02:50/ 0 赞/ 246 阅读

相关【vueJs】windows下安装搭建vueJS开发环境

一、简介 Vue.js 是什么 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量

悠悠/ 2022年06月15日 03:17/ 0 赞/ 329 阅读

相关【VueJS】live-server 快速搭建服务及注意事项

本地开发常常需要搭建临时的服务，第一时间我们会想到用 `http-server`。但现在流行修改文件浏览器自动刷新，这里可以使用 `live-server` 很简单就能启动

缺乏、安全感/ 2022年06月02日 04:05/ 0 赞/ 278 阅读

相关 docker简易搭建RabbitMQ集群

写在前面：第一种普通集群模式：rabbitmq集群与其他集群有些不同，rabbitmq集群同步的指是复制队列，元数据信息的同步，即同步的是数据存储信息；消息的存放只会存

ゞ浴缸里的玫瑰/ 2022年05月15日 15:12/ 0 赞/ 348 阅读

相关 docker简易搭建kafka

写在前面：在我们大量使用分布式数据库、分布式计算集群的时候，是否会遇到这样的一些问题：想分析一下用户行为，一遍我能设计出更好的广告位，相对用户的搜索关键字尽心统计，分析出前卫的

以你之姓@/ 2022年05月15日 10:21/ 0 赞/ 352 阅读

相关 idea搭建简易ssm项目

按照[http://www.cnblogs.com/hackyo/p/6646051.html][http_www.cnblogs.com_hackyo_p_6646051.h

左手的ㄟ右手/ 2022年03月29日 16:42/ 0 赞/ 289 阅读