In the early stage, I undertook a private project to build an official website. I thought that vUE technology stack was used in the company, and NUXT could be used to make the official website.

start

The installation

Nuxt installation can follow the steps on the official website

// create nuxt-app yarn create nuxt-app <project-name>cd <project-name>
yarn dev
Copy the code

Using the preprocessor

Install the preprocessor directly under the project

yarn add less less-loader
Copy the code

Global components

Create the lib-components.js file in the plugins folder

import Vue from 'vue';

import LoadImage from ".. /components/LoadImage";

const components = { LoadImage };

Object.entries(components).forEach(([name, component]) => {
  Vue.component(name, component)
});
Copy the code

Configure it in the nuxt.config.js file

. plugins: [ ...'@/plugins/lib-components'],...Copy the code

Mount the global HTTP request

If we want to make requests globally, in a traditional Vue project we can mount them to the prototype in main.js, while in a Nuxt project we use plugins.

// Create request.js in plugins // axios configuration customizable vue. use({install:function(Vue) {
    Vue.prototype.$http= http; }});Copy the code

Configure it in the nuxt.config.js file

. plugins: [ ...'@/plugins/request'],...Copy the code

Other configuration and problems can be found in the official website, syntax and Vue completely seamless.

The deployment of

After the project is written, it will be deployed online, because the project is still a separate front and back end of the project, and the front end is still using Nginx as a proxy.

Install the node

The server uses centos and can be installed using yum

curl -sL https://rpm.nodesource.com/setup_10.x | bash -

yum install -y nodejs

node -v
Copy the code

Copy files

  • Execute locally firstyarn buildThe command
  • Copy the files marked below to the server deployment directory/opt/deploy/front

Enter directory to execute

cd /opt/deploy/front

npm install -production

npm run start
Copy the code

Nginx configuration

server {
    listen 80;
    server_name www.test.com;
    
    location / {
        root /opt/deploy/front; # Front-end file directory
        proxy_passhttp://127.0.0.1:3000; }}Copy the code

After starting nginx, you can access the domain name to see the project.

Pm2 daemon

For online projects, if they are started directly through Node APP, the whole service may be stopped directly and crash if errors are reported. We can use PM2 to manage the Node process

  • The installation
npm install pm2 -g
Copy the code
  • Project root directory is createdpm2.json
[{"name": "demo"."script": "npm run start"."env_dev": {
      "NODE_ENV": "development"
    },
    "env_production": {
      "NODE_ENV": "production"}}]Copy the code
  • Start thepm2
cd /opt/deploy/front

pm2 start pm2.json
Copy the code

  • The commonly usedpm2instruction
pm2 start app.js               # Launch the app.js app

pm2 start app.js --name="demo"  Start the application and name it "demo"

pm2 start app.js --watch       Automatically restart the application when the file changes

pm2 start script.sh            Start the bash script

pm2 list                       List all applications that PM2 started

pm2 show [app-name]            Display all information about the application

pm2 logs                       Display logs for all applications

pm2 logs [app-name]            # display logs for the specified application

pm2 stop all                   # Stop all apps

pm2 stop 0                     # stop the specified application with id 0

pm2 restart all                # Restart all applications

pm2 restart 0                  # restart the application with id 0

pm2 delete all                 # Close and delete all apps

pm2 delete 0                   # delete app id 0

pm2 startup                    Create a boot autostart command

pm2 save                       Save the list of current apps
Copy the code

conclusion

The whole project was smooth from installation to deployment. After all, the vUE technology stack was used. However, there is still room for optimization. This project is not a complete SSR project and does not make good use of NUXT features.

Welcome to pay attention to the public number, we communicate and progress together.