nuxt脚手架的使用总结（一）——安装、运行以及基础配置

前言

因为公司开始了一个新的项目，而前一阵又简单的学习了一下nuxt的使用，刚好运用到项目中加以实践，记录一下使用中遇到的问题。

安装说明

首先要确保自己安装了npx（npx在NPM版本5.2.0默认安装了），就可以执行命令

npx create-nuxt-app <项目名称>
创建之后会出现下图的一系列选项

1.项目名称
2.对项目的一个表述信息
3.作者的名称
4.选择使用的语言：目前我用的还是javascript，没有用到TypeScript
5.选择js包的管理工具：npm
6.选择UI框架： 我们目前用的UI框架时Element
7.选择服务框架：没有用额外的 就是nuxt
8.选择交互模型：axios
9.选择代码规范
10.选择测试框架
11.选择加载模式：当然是ssr啦！
12.选择开发工具：我选择的针对vscode的

当以上内容全部选择完毕是之后，就可以等待自动安装依赖啦！

对项目的操作命令

开发模式下运行

cd <项目名>
npm run dev

这样启用后默认地址为 localhost:3000，如果你期望可以以IP地址的形式访问你的项目，只需要在package.json文件中添加一下代码：

"nuxt": {
	"host": "0.0.0.0",
	"port": "你期望的端口号"
}

发布部署

我们选择的是服务端渲染应用部署，执行一下两条命令。

npm run build
npm start

目录结构

• components：组件目录（该文件夹下的组件没有asyncData方法）
• layouts：布局目录（该文件夹不允许重命名）
• middleware：中间件目录
• pages：页面目录（框架根据该目录下所有.vue文件生成路由）
• plugins：插件目录（在实例化之前需要运行的javascript插件）
• static：静态文件目录（不会被进行编译）
• store：用于组织应用的vuex树文件 nuxt.config.js：nuxt应用的配置文件
• package.json：用于描述应用依赖关系和对外暴露的脚本接口

别名
~或@ 代表srcDir
~~或@@代表rootDir

nuxt.config.js中的配置

1.跨域设置

proxy: {
	'/api': {
		target: '你的目标地址',
		pathRewrite: {
			'^/api' : '/'
		}
	}
}

2.使用sass预处理器的配置
如果项目中使用sass编译样式，请确保已经安装了相关依赖，如果没有要先执行一下命令

npm install node-sass sass-loader scss-loader --save-dev

// 最近总是需要在linux下面部署 记录一个在linux中安装的命令
npm install node-sass --unsafe-perm --sass_binary_site=https://npm.taobao.org/mirrors/node-sass

/**
* 全局的样式
*/
  css: [
    {
      src: '@/assets/baseStyle.scss',
      lang: 'scss'
    }
  ]

/**
* 在.vue文件中编写
*/
<style lang='scss'>
	'''
</style>

3.对router的配置

/**
* 1.将路由名称之间的分隔符改为/
* 2.为每个路由页面都设置一个中间件，进行路由跳转前的校验
*/
router:{
	routeNameSplitter: '/' ,
	middleware: 'user-agent'
}

4.插件配置

  plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios'
  ],

5.设置页面切换过渡效果

/**
*过渡模式及效果参考vue中的介绍
*/
transition：{
	name:page,
	mode:'想要的过渡模式'
}

6.设置全局的meta信息

head: {
	title: process.env.npm_package_name || '',
	meta: [
		{ charset: 'utf-8' },
		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
		{
			hid: 'description',
			name: 'description',
			content: process.env.npm_package_description || ''
		}
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
}

以上是关于安装、运行以及基础配置的介绍。如有问题欢迎留言。