Nuxt学习笔记——Nuxt项目安装

深藏阁楼爱情的钟 2021-12-21 11:09 950阅读 0赞

## 一、脚手架安装nuxt.js ##

npm init nuxt-app ----npm安装  
npx create-nuxt-app <项目名> ----npx安装（确保安装了npx）  
yarn create nuxt-app <项目名> ----yarn安装（确保安装了yarn）

然后配置一些他的问题，虽然不知道是什么，但是感觉应该就是问一下项目名字，作者名字，什么UI框架之类的（具体解释去[看官网][Link 1]）  
![安装nuxt.js][nuxt.js]

创建成功啦，cd <项目名> 进入到项目目录然后npm run dev启动项目就可以进入项目界面啦

![启动nuxt项目][nuxt]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWVsX2xq_size_16_color_FFFFFF_t_70]

## 二、不使用脚手架安装nuxt.js ##

1.  新建文件夹，命名为项目名（使用英文）
2.  进入项目文件夹，在文件夹中创建package.json文件，设置项目名字和启动命令
    
        {
          "name": "test-nuxt-config",
          "scripts": {
            "dev": "nuxt"
          },
          "dependencies": {
            "nuxt": "^2.8.1"
          }
        }
3.  Nuxt.js 会依据 pages 目录中的所有 \*.vue 文件生成应用的路由配置，先创建一个pages文件夹，然后在文件夹下面创建一个index.vue写点东西  
    ![Nuxt.js 会依据 pages 目录中的所有 \*.vue 文件生成应用的路由配置][Nuxt.js _ pages _ _.vue]  
    然后npm run dev启动项目，就可以看到项目页面啦，跟脚手架是一样的  
    ![不用脚手架搭建nuxt项目][nuxt 1]

**nuxt项目安装如上，如果还有什么需要注意的，还望各位同行，大佬指教一下呀**

[Link 1]: https://zh.nuxtjs.org/guide/installation
[nuxt.js]: /images/20211221/2ae1d1fa0e8d4b3e9264c9f447fbd8a9.png
[nuxt]: /images/20211221/f0bd3e899849496a9d594befcaae9e74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWVsX2xq_size_16_color_FFFFFF_t_70]: /images/20211221/42e9552219114046b514ce020dd6a8a6.png
[Nuxt.js _ pages _ _.vue]: /images/20211221/7007232500664606aef4c912b4aa206d.png
[nuxt 1]: /images/20211221/522f48f576d349d7a88d97abaec64a99.png