nuxt添加.html,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']

}

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