如何进行nuxt的开发 | 8月更文挑战（已经更文8天）

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战 （已经更文9天）css

官网介绍说Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来建立服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具备优雅的代码结构分层和热加载等特性。vue

前面已经介绍过了SPA和SSR的不一样，这里就不过多赘述了，而今天的nuxt.js开发的页面就是SPA形式的，如掘金大大就是使用nuxt开发的node

`nuxt`开发的优势

首现要确保安装了node,而且版本通常是不能低于v12的，node安装后，就要安装vue-cli脚手架ios

npm install vue-cli -g
复制代码

固然安装的速度取决于你的镜像，npm是从国外网站下载依赖包，网络很差的话会很慢，这时你可使用淘宝的镜像cnpm和yarn进行安装都是能够的git

能够自定义安装nuxt,自定义构建模板文件github

yarn add nuxt 
复制代码

安装好vue-cli后，就可使用init命令来初始化Nuxt.js项目。vue-cli

vue init nuxt/starter
复制代码

这时候他会在github上下载模版，而后会询问你项目的名称叫什么，做者什么的，这些彻底能够根据本身的爱好填写。express

3.使用npm install安装依赖包npm

npm install
复制代码

这个过程是要等一会的，若是你这个过程安装失败，也不要慌张，你能够直接诶删除项目中的node_modules文件夹后，从新npm install进行安装。element-ui

4.使用npm run dev 启动服务

npm run dev
复制代码

5.在浏览器输入 localhost:3000,能够看到结果。

Hello World

$ yarn create nuxt-app <项目名>
复制代码

它会让你进行一些选择:

当运行完时，它将安装全部依赖项，所以下一步是启动项目:

$ cd <project-name>
$ npm run dev
复制代码

应用如今运行在 http://localhost:3000 上运行。

注意：Nuxt.js 会监听 pages 目录中的文件更改，所以在添加新页面时无需从新启动应用程序

我必须将如下内容添加到nuxt.config.js：

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}
复制代码

在package.json里面增长

"config":{
    "nuxt":{
	"host":"127.0.0.1",
        "port":"9900"
   }
}
复制代码

在nuxt.config.js文件里面的css里面以下设置

css: ["element-ui/lib/theme-chalk/index.css", "~assets/css/normal.css"],
复制代码