Nuxt.js打造旅游网站第1篇_项目环境搭建

Posted 2022-04-04 replaceroot

1. 安装

使用官网提供的脚手架工具 create-nuxt-app，创建一个nuxtjs项目。

npx create-nuxt-app xianyun

注意：在NPM版本5.2.0默认安装了npx，在命令行窗口输入npm --version可查看当前版本号

 

需要等待片刻安装依赖的下载，下载完成后可以看到下面的提示框，要求输入项目名称。

UI框架我们选择通用的Element-ui。

 

这里和接下来的提示都不需要输入任何内容，回车即可，直到要求选择服务器端框架。

 

服务器端框架选择none，代表使用Nuxt的默认服务器。

接下来我们来选择安装一下额外的功能包，选择安装Axios（要按下空格键选中），继续回车下一步

功能说明：

• 添加 axios 以轻松地将HTTP请求发送到您的应用程序中。

 接下来的提示中统一回车选择默认即可。

 

2. 启动

 当运行完时，项目将安装所有依赖项，因此下一步是启动项目:

cd xianyun
npm run dev

 

注意：此时运行项目可能会遇到以下错误提示`htmlElement is not define nuxt.js`，原因是在`Nuxtjs`的服务器环境加载`Element-ui`遇到兼容问题抛出的错误，（如不报错则表示bug已修复），解决办法如下：

下载指定版本的`element-ui`

npm install --save [email protected]

 

项目初始化就完成了。

 

Nuxt和普通的Vue

 

1. Nuxt是同构程序，这里的同构指的是一套代码，可以在浏览器运行，也可以在服务器（Nodejs）运行，也就是说可以同时使用浏览器的API和Nodejs的API。

2. 普通的Vue页面只能使用浏览器的API，即使在Nodejs环境下开发也只是使用Webpack来编译打包。

3. Nuxt是前后端框架的集合，前端采用Vue，后端可选框架有Express、hapi等，所以可以理解为Vue是一个页面模板的存在，类似于art-template

4. Nuxt支持单页和多页应用。

注意：虽然Nuxt确实很强大，但是目前市面上应用的却不是很多，因为nodejs作为服务器端语言目前还是相对较少的，更多的还是java，php等，所以我们会把精力集中在的功能业务开发上，以及一些Vue未接触过的用法。

项目地址：https://github.com/replaceroot/kuaiyou