Xianyun travel day01-project preparation

Initialize the project

It's a bit like the previous scaffolding, but there are more things to encapsulate

Follow the steps below to initialize a nuxtjs project

installation

Switch to the path where the project is stored

Then use the scaffolding tool create-nuxt-app provided by the official website to create a nuxtjsproject.

npx create-nuxt-app xianyun

Note: It is NPMinstalled by default in version 5.2.0 npx, enter in the command line window npm --versionto view the current version number

The following is the final option, and then the installation starts automatically. You

need to wait for a moment to install the dependent download. After the download is complete, you can see the following prompt box, asking for the project name and some other questions

start up

When finished, the project will install all dependencies, so the next step is to start the project:

//运行
  cd xianyun
  npm run dev

Startup will pop up a prompt to open

http://localhost:3000/

If 404 appears

You can replace it with 127

http://127.0.0.1:3000/

Note: No error is reported, don’t worry about this step. At this time, running the project may encounter the following error message HTMLElement is not define nuxt.js. The reason is Nuxtjsthat the server environment loading Element-uiencounters an error thrown by a compatibility problem. (If no error is reported, the bug has been fixed). The solution is as follows :

Download the specified versionelement-ui

 npm install --save [email protected]

The project initialization is complete.

Initial example of scaffolding

If you want to use,

1. First fork to your account
2. Clone the items under your account
3. Enter the project folder and run npm install
4. npm run dev

https://gitee.com/owahahah/xianyu.git

Work list

Project demo

Example:

http://157.122.54.189:9093/ +Request address

data service:

Data service operation steps

1. unzip

2. Run in the directory

   npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
   

3. npm run start

4. If the database fails

   Our backend server has embedded the database, and it will usually be installed automatically. If you have encountered some machines, the database installation will be missing. You will be prompted to fill it up.

   If the error is reported in the following figure, it can be run
   

Online database: (For the tickets learned later, it is recommended to use the online ones directly)
http://157.122.54.189:9095/

Project file structure

File structure

Official website document: https://zh.nuxtjs.org/guide/directory-structure

- xianyun 项目根目录
	- assets 		资源目录
	- components 	组件目录
	- layouts 		布局组件目录
	- middleware 	中间件目录
	- pages			页面目录
	- plugins		插件目录
	- static		静态文件目录
	- Store			Vuex 状态树 文件
	- nuxt.config.js	Nuxt.js 应用的个性化配置
	- package.json	依赖关系和对外暴露的脚本接口

Alias ​​description

Alias	table of Contents
~ or @	src directory
~~ or @@	Root directory

By default, src目录and 根目录the same

Note: ** In your vuetemplate, if you need to introduce assetsor staticdirectory, use ~/assets/your_image.pngand ~/static/your_image.pngmanner.

basic configuration

Modify/delete the default file

Nuxtjs provided us with two demo files when initializing the project, which have no effect on our next project development. They are pages/index.vueand respectively components/logo.vue.

Modify as follows:

1. Firstpages/index.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2. Delete components/logo.vuefiles

Now when you visit the homepage http://localhost:3000/, you can only see 首页two words.

Create page directory

In the nuxt framework, there is no need to configure routing

As long as you create a folder or file under the pages folder, the route can be automatically generated

Next, create a project structure directory to facilitate future expansion of project modules.

pagesCreate a new folder in the directory, the folders correspond to the business modules to be developed next

- ... // 其他文件

- pages
	- index.vue 		// 已存在的首页文件
	- post				// 存放旅游攻略模块的文件夹
		- index.vue		// 旅游攻略模块首页文件
	- air				// 存放机票模块的文件夹
		- index.vue		// 机票模块首页文件
	- hotel				// 存放酒店模块的文件夹
		- index.vue		// 机票模块首页文件
	- user				// 存放用户模块的文件夹
		- login.vue 	// 用户登录注册页面
		
- ... // 其他文件

If you have added the above file, we can directly access pagesthe page under the route to check whether the page has been added successfully. For example, we modify the post/index.vuecontent as follows:

<template>
    <div>
        旅游攻略首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Visit the address in the browser http://localhost:3000/post, the page is displayed as follows:

[External link image transfer failed. The origin site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-ivbVjeAN-1604683617127) (project preparation.assets/1558687169347.png)]

1. By the way air/index.vue, hotel/index.vuealso add the above content, but you need to modify the text to facilitate the distinction between pages.

2. The page access rules of SPANuxtjs are different from the mechanism of the browser. There is no need for routing configuration in Nuxtjs, pagesand the pages underneath can be accessed directly through the path, which is searched by default.index.vue

Create component catalog

Although the development of the page has not yet started, we can predict that there will be many components that can be packaged independently in the future pages, so we can 未来的组件create a new storage directory now .

In componentsthe new file folder:

- ... 			// 其他文件

- components	// 存放公共组件的文件夹
	- post		// 存放旅游攻略模块组件的文件夹
	- air		// 存放机票模块组件的文件夹
	- hotel		// 存放酒店模块组件的文件夹
	- user		// 存放用户模块组件的文件夹
	
- ... 			// 其他文件

Modify the configuration file

Page transition effect style (optional)

The page jump has not been involved yet, but it does not prevent us from preparing the project configuration in advance. This configuration is only designed to optimize the user experience when the page is switched, and it is not necessary.

assets/Create this file in the directory assets/main.cssand add the following styles:

/* 页面切换时候过渡样式 */
.page-enter-active, .page-leave-active {
    
    
    transition: opacity .5s;
}

/* 打开时候过渡样式 */
.page-enter, .page-leave-active {
    
    
    opacity: 0;
}

/* 页面顶部页面加载进度条 */
.nuxt-progress{
    
    
    background:#409eff;
    height: 1px;
}

Only the newly created style file can't produce effect, it needs to nuxt.config.jsbe loaded in the configuration file to take effect.

For the configuration method, please refer to the notes in the next section

Reference document: transition animation

Modify the configuration file

Previously webpack configuration was in webpack.config.js

vue-cli in vue.config.js

nuxt Its configuration is all in nuxt.config.js

The configuration file configures nuxt.config.jsthe project globally and takes effect on every page.

Copy the nuxt.config.jsfile of the configuration replacement project below , if you want to modify it manually, you can view it中文注释行(#10 #18 #32 #56)

import pkg from './package'

export default {
    
    
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    
    
    title: "闲云旅游网", // 修改title
    meta: [
      {
    
     charset: 'utf-8' },
      {
    
     name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
    
     hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      {
    
     rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
    
     rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字体样式
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: {
    
     color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' // 新增自定义的页面过渡样式（文件来自3.4.1）
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // https://axios.nuxtjs.org/setup
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    
    
    // See https://github.com/nuxt-community/axios-module#options
    // baseURL: "http://157.122.54.189:9095" // 新增备用地址
    baseURL: "http://127.0.0.1:1337" // 新增axios默认请求路径 		  
  },

  /*
  ** Build configuration
  */
  build: {
    
    
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    
    
    }
  },
}

Note: nuxt.config.jsRemember to restart the project if you modify it (more insurance)

If axios is omitted when creating the directory, there is no choice

You can install npm i @nuxtjs/axios by yourself

npm install @nuxtjs/axios

Add less

We choose the pre-compiled style less, and the relevant configuration nuxtjshas been configured for us. webpackThe configuration file that does not need to be changed , only needs to install the dependency package.

npm install --save less less-loader 

to sum up

1. Initialize the project command:

   // 安装，注意选项选择
   npx create-nuxt-app xianyun
   
   // 启动
   $ cd xianyun
   $ npm run dev
   

2. New project file structure

3. (Optional) Create a css with page jump rotation effect

4. Modify the default configuration file nuxt.config.js, pay attention to the modification of the configuration file to restart the project (the most insurance)

Nuxt and ordinary Vue

1. NuxtIsomorphism program here refers to a homogeneous set of code that can be run in a browser, the server may be ( Nodejs) operation, i.e. while using a browser APIand Nodejsthe API.

2. Ordinary Vuepages can only use the browser API, even in Nodejsthe development environment, it is only used Webpackto compile and package.

3. NuxtIt is a collection of front-end Vueand back- end frameworks, adopted by the front-end , and optional back-end frameworks Express、koa2, egg, api, so it can be understood as Vuethe existence of a page template, similar to art-templateejs

4. NuxtSupport single-page and multi-page applications.

Note: Although Nuxtit is indeed very powerful, there are not many applications on the market at present, because nodejsthere are relatively few server-side languages ​​at present, and more are still java，phpwaiting, so in this project, there will be no ssr server-side rendering. Expansion, we will mainly focus on functional business development and some Vueuntouched usages.