nuxt.js-vue服务端渲染框架学习笔记-创建项目
2018-10-25 本文已影响0人
fuheideMayuyu
1. 确保安装了npx(npx在NPM版本5.2.0默认安装了,可以选择直接升级npm: npm install -g npm,也可以选择全局安装npx: npm install npx -g):
$ npx create-nuxt-app <项目名>
2.选择你需要的服务端框架和前端UI框架
image.png3.选择你想要的nuxt模式(Universal or SPA,即单页应用和多页应用)
4.选择是否添加axios module.
5.选择是否添加Eslint代码规范
6.选择是否添加Perttier代码美化/格式化插件
7.依赖安装完成之后使用下方命令运行项目:
npm run dev
到此,nuxt.js项目就可以正式运行起来了,出了上面的方法之外也可以使用Nuxt提供的模板快速进行安装(不用上面那些繁琐的配置):
$ vue init nuxt-community/starter-template <project-name 项目名>
安装依赖包:
cd <project-name>
npm install
启动项目:
npm run dev
从头开始创建新项目
1.新建一个项目文件夹
2.在项目文件夹中新建package.json文件
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
3.运行下方命令:
npm install --save nuxt
4.创建pages文件夹
5.在pages文件夹中创建index.vue文件
<template>
<h1>Hello world!</h1>
</template>
6.运行项目:
npm run dev
生成静态文件
npm run generate
运行命令之后会生成dist文件夹,里面就是编译好的静态文件。
目录结构:
|—— .nuxt // 项目编译之后的文件夹
|——asssets // 用于存放未编译的静态资源,如:SASS、LESS、或JavaScript
|——components //用于存放vue公共组件,这些组件不会像页面组件那样有asyncData特性。
|——layouts // 页面布局目录
|——middleware // 用于存放中间件
|——pages // 用于存放页面目录
|——plugins //用于存放JavaScript插件,如element-ui.js等
|——static // 用于存放静态文件,即不需要编译即可使用的文件,如图片等
|——Store //vuex文件夹
|——nuxt.config.js //Nuxt.js配置文件
|——packge.json //项目依赖文件
别名:
~或@ : src目录
~~或@@: 根目录
默认情况下,src目录和根目录相同