nuxtjs使用记录
1.npm install vue-cli -g 全局安装vue-cli
C:\Users\Dell>npm install vue-cli -g npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) C:\Users\Dell\AppData\Roaming\npm\vue -> C:\Users\Dell\AppData\Roaming\npm\node_modules\vue-cli\bin\vue C:\Users\Dell\AppData\Roaming\npm\vue-init -> C:\Users\Dell\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init C:\Users\Dell\AppData\Roaming\npm\vue-list -> C:\Users\Dell\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list + vue-cli@2.9.6 added 239 packages from 205 contributors in 45.284s |
查看是否安装成功
C:\Users\Dell>VUE -V 2.9.6 |
2.初始化nuxtjs项目
vue init nuxt/starter
Dell@DESKTOP-700M7A8 MINGW64 ~/Desktop/nuxtjsstudy
$ vue init nuxt/starter
? Generate project in current directory? (Y/n) Y
? Generate project in current directory? Yes
? Project name nuxtjsstudy
? Project description (Nuxt.js project)
? Project description Nuxt.js project
? Author (shouwei <412198579@qq.com>)
? Author shouwei <412198579@qq.com>
vue-cli · Generated "nuxtjsstudy".
To get started:
npm install # Or yarn
npm run dev |
3.npm install安装依赖
4.npm run dev
PS C:\Users\Dell\Desktop\nuxtjsstudy> npm run dev Active code page: 65001 > nuxtjsstudy@1.0.0 dev C:\Users\Dell\Desktop\nuxtjsstudy > nuxt ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.12.2 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:3000/ │ │ │ ╰─────────────────────────────────────────────╯ i Preparing project for development 11:27:54 i Initial build may take a while 11:27:54 √ Builder initialized 11:27:54 √ Nuxt files generated 11:27:54 Compiled successfully in 15.96s √ Server Compiled successfully in 14.88s i Waiting for file changes 11:28:13 i Memory usage: 214 MB (RSS: 277 MB) 11:28:13 i Listening on: http://localhost:3000/ |
5.package.json中修改配置，修改地址和端口
{
"name": "nuxtjsstudy",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "shouwei <412198579@qq.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"3001"
}
},
"dependencies": {
"nuxt": "^2.0.0"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"eslint": "^4.19.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-vue": "^4.0.0"
}
} |
6.nuxt.config.js配置全局css文件
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'nuxtjsstudy',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css:['~assets/common.css'],
...略 |
在根目录创建默认模板app.html
<html>
<head>
{{HEAD}}
</head>
<body>
<p>nuxtjs</p>
{{APP}}
</body>
</html> |
layout/default.vue创建默认布局
创建错误页面 layout/error.vue
<template>
<div v-if="error.statusCode ==404">404页面找不到</div>
</template>
<script>
export default {
props: ["error"]
};
</script>
head(){
return {
title:"这是新闻页面",
meta:[
{hid:"hid",name:"desc",content:"this is news content"}
]
}
} |
会生成以下标题和meta标签
<title>这是新闻页面</title> <meta data-n-head="ssr" data-hid="hid" name="desc" content="this is news content"> |
npm install axios –save
npm run generate在根目录的dist文件夹下生成静态部署文件
live-server安装
npm install -g live-server live-server |