Vue.js 2.0 backend system practical case

This time I will bring you a practical case of the Vue.js 2.0 backend system. What are the precautions for the actual use of the Vue.js2.0 backend system? The following is a practical case, let’s take a look.

My friend recently wanted to make an OA for his own use to practice his skills (PS, he has always wanted to start a business), so he asked me to do it with him. Since time is limited recently, I helped him write a framework for himself. Use it.

I use yarn to manage the project (really not following the trend), of course you can also use Npm management

First use vue-cliInitialize the project, and then install Vue-router Vuex element, since my friend has never done front-end work, I chose element to quickly develop the page. After installing all dependencies Directory structure is like this

Directory structure

What needs to be noted here is that each of my components is a folder composed of index.vue script. js style.sass template.jade file, which can be easily formatted in the editor. When referencing, you only need to quote the folder

e.g.
import NotFound from './views/404';
index.vue
<style lang="sass" scoped src="./style.sass"></style><template lang="jade" src="./template.pug"></template><script src="./script.js"></script>
script.js
export default {  data() {    return {    }  },  components: {  }}
sass
.red  color: red

Because the project generated by vue-cli webpack does not use jade, you need to add webpack's jade-loader

Note that you need to install pug-html-loader jade

...
     {        test: /\.pug$/,
        loader: 'vue-html!pug-html'
      },
...

Sass support

In order to support Sass, you need to install sass-loader node-sass

Vue-resourceI have installed it and haven’t decided to use it yet. I may use Ajax. If I use Ajax, I will use the reqwest library

The project here refers to the best practical process of building a single-page application with vue2.0, so the functions of the examples are the same~

Please Star github

I believe you have already read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Related reading:

js knowledge about BOM operations compiled

10 js regular expressions Applications

The above is the detailed content of Vue.js 2.0 backend system practical case. For more information, please follow other related articles on the PHP Chinese website!