Nuxt环境搭建

nuxt.js安装

1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这这步

npm install vue-cli -g

2.初始化Nuxt.js项目

vue init nuxt/starter 

3.使用npm install安装依赖包

npm install

4.使用npm run dev启动服务

npm run dev

Nuxt自动生成了项目目录,我们先来一个一个介绍一下。

 .nuxt // Nuxt自动生成,临时的用于编辑的文件,build

 assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript

 components // 用于自己编写的Vue组件,比如波动组件、日历组件、分页组件

 layouts // 布局目录,用于组织应用的布局组件,不可更改

 middleware // 用于存放中间件

 pages // 用于存放写的页面,我们主要的工作区域

 plugins // 用于存放JavaScript插件的地方

 static // 用于存放静态资源文件,比如图片

 store // 用于组织应用的Vuex 状态管理

 .editorconfig // 开发工具格式配置

 .eslintrc.js // ESLint的配置文件,用于检查代码格式

 .gitignore // 配置git不上传的文件

 nuxt.config.json // 用于组织Nuxt.js应用的个性化配置,已覆盖默认配置

 package-lock.json // npm自动生成,用于帮助package的统一设置的,yarn也有相同的操作

 package.json // npm 包管理配置文件 

在nuxt中配置elementUi

1.安装element-ui

npm i element-ui -s

2.创建ElementUI.js

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

3.在nuxt.config.js中添加配置

 /*
 ** elementui配置
 */
css:[
  'element-ui/lib/theme-chalk/index.css'
],
 plugins: [
   // ssr: true表示这个插件只在服务端起作用
   {src: '~/plugins/ElementUI', ssr: true }
 ],
/*
** Build configuration
*/
build: {
  // 防止element-ui被多次打包
  vendor: ['element-ui']
}

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » Nuxt环境搭建

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. test说道:

    很好,很强大