I have been working for some time. I am usually busy with business code writing, and I find that some people around me and myself have some deviation in understanding of some basic concepts, which may make jokes and ask the following common sense wrong strange questions:

  1. How is Vuejs deployed on the server? (After I submit to the server and execute NPM run dev, I can open the web page, but after I close SSH, the service cannot be used immediately, I would like to ask what is the correct deployment mode?)
  2. Vue development project, front-end written. Vue file in the lifecycle method, online still exist?

2333, why is it all about Vue… I don’t really have anything to say about Vue developers, but I can also see that Vue has a large white audience.

Original blog post

Webpack and a webpack – dev – server

Nowadays, SPA single-page application development based on Vue and React tends to adopt webPack’s modular construction scheme. Probably most of us, when developing a project, will use scaffolding tools (vUE – CLI, create-react-app). When we’re developing locally, we run the command line NPM run dev, and then we start writing the business logic. Most of us probably don’t care much about what happens. To run the webpack-dev-server command, run webpack-dev-server

Webpack-dev-server is a small Express server officially provided by WebPack. It is because webpack-Dev-server starts a server itself that we can separate development from the front and back end (we don’t need to care about the code on the back end). The front-end starts this server, which builds and renders pages, and provides automatic refresh and hot replace.

Simply put: Webpack just builds (NPM run Build)

Webpack-dev-server provides Web services in addition to build (NPM run Dev)

routing

What is routing? In a nutshell: /about/deepred /home/ These are the routes

In Web development, routing is divided into front-end routing and background routing. In fact, before the popularity of single page application, routing basically refers to background routing. If you’re familiar with traditional backend Web development, you’re probably familiar with the following code:

app.get('/about'.function (req, res) {
  res.render('about', { title: 'Hey'.message: 'Hello there! '});
});
app.get('/'.function (req, res) {
  res.render('index');
});
Copy the code

In traditional Web sites, all routes are defined by the background. When we want to visit a page http://anata.me/about/, we first send a request to the background, and the background decides which page to render according to the defined route.

With the advent of single-page apps, however, this model has changed. If you’re a front-end developer, you should be more familiar with this code:

routes: [
    {
      path: '/user/:userId'.name: 'user'.component: User
    },
    {
      path: '/about/'.name: 'about'.component: About
    }
  ]
Copy the code

Front-end routing is to give the rendering right of the page to JS control, not through the request server to judge the rendering page. The front end generally uses Histroy and hash to control, so that the displayed content can be changed without refreshing the page, which is faster and better user experience. Front-end routing frees up the server to provide interface data services.

Packaged deployment

Scaffolded projects, typically after running NPM run build, generate a dist directory in the root of the project, which is our packed static resource file. Note that:

  1. The single-page application we run online is the packaged dist file, not the source file in the SRC directory
  2. Online deployment is not operationalnpm run devStart the project.npm run devThe startup server is for development purposes only, the real online server is provided by the background (such as PHP, Java, Python, Node…).

There are many ways to deploy the dist file. For example, you can put the Dist file together with the background code, and the background can read the Dist file as a static resource. However, because the front-end routing scheme is adopted, some configuration needs to be done in the background. For example, Express:

This is to access all static resource files in the dist directory
app.use(express.static(path.resolve(__dirname, '.. /dist')))
// Because it is a single page application, all requests go to /dist/index.html
// This sentence should be placed after all other routes
app.get(The '*'.function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '.. /dist/index.html'), 'utf-8')
    res.send(html)
})
Copy the code

You can also separate the Dist static files from the background code and deploy them through Nginx

server {
        listen 80;
        server_name 127.0.0.1;
        location / {
            root   /data/deered/dist; Dist file location after front-end packaging
            try_files $uri $uri/ /index.html; # prevent page refresh 404index index.html; }}Copy the code

Cross domain

Because Webpack-dev-server starts a server, there is a cross-domain problem with the front end requesting the real back-end interface at development time. Webpack provides a cross-domain solution that works by having the server reverse proxy request the real interface

Vue-cli configuration across domains

proxyTable: {
      '/api': {
        target: 'http://localhost:8089/api/'.changeOrigin: true.pathRewrite: {
          '^/api': ' '}}},Copy the code

Front end request/API/XXXX, webpack dev – server startup will help us to request http://localhost:8089/api/xxxx server, return the data at the same time.

Some people might wonder if the packaged files can also cross domains. As mentioned earlier, online deployment is not about running NPM run Dev, so whether the front end is cross-domain depends on how you deploy it.

If you put the packaged DIST file with the back-end code, there is no cross-domain problem at all! If the front end static files are not together with the back end, then Nginx can be used for forwarding

server {
        listen 80;
        server_name 127.0.0.1;
        location / {
            root   /data/deered/dist; Dist file location after front-end packaging
            index  index.html;
            try_files $uri $uri/ /index.html; } location/API {proxy_pass http://127.0.0.1:8089# background address}}Copy the code

Vue and React

Vue’s command and template language allows developers to easily implement complex functions, while React’s JSX syntax gives developers more autonomy. The developers who switched from Vue to React might be very uncomfortable at first. After all, V-for, V-If, V-Model and other basic functions of React had to be implemented by ourselves.

We can actually look at it essentially:

A Vue component:

<template>
  <div class="hello" @click="say">
    <h1>{{ msg }}</h1>
    <h2 v-if="show">show me</h2>
  </div>
</template>

<script>
export default {
  name: 'Hello World',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show: false
    }
  }
  methods: {
    say() {
      console.log('hi')
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

Copy the code

A React component

const styles = {
  fontWeight: 'normal'
}
export default class Hello extends Component {
  constructor(props) {
        super(props);
        this.state = {
            msg: 'Welcome to Your React App'.show: false
        };
    }

  say() {
    console.log('hi')
  }

  render() {
    return (
      <div class="hello" onClick={this.say}>
        <h1 className={styles}>{this.state.msg}</h1>
        {this.state.show ? <h2>show me</h2> : null}
      </div>)}}Copy the code

The React component is completely a Class. You’re writing all kinds of Class methods all the time. Even your CSS is an object, so React requires developers to have a good ES6 foundation because you’re writing JS all the time

A Vue component is a normal object. You are modifying the properties of the object: Name Data Methods Components. You configure the object’s Components property so you can use custom components in the template

Therefore, React is essentially impossible to provide a V-for-like API, because JS already has a for loop and a map method for arrays. When you write React, you are writing JS. Why do you need additional traversal methods? Vue, on the other hand, provides instructions that actually write JS for you internally, so developers switching from React to Vue will initially feel that Vue code is simpler. But it’s a sacrifice of freedom, because in React, it’s up to you to iterate, right