Chapter two: Initial experience

preface

The second hot article is coming. I am really sorry for not updating it in time because I am busy with projects these days

introduce

In the previous chapter, we introduced the construction of scaffolding. In this chapter, we started the formal development. Without further ado, we directly developed a background management system.

The directory structure

I don’t know them. They don’t know me. Hold your fire and let them introduce themselves.

  • Build: Webpack configuration, the various commands vue scaffolding has been configured for us.
  • Config: Basic configuration files for vue, such as port number listening, package output, etc.
  • Dist: The packaged files are all here, which means you runnpm run buildAnd then there’s a whole bunch of stuff that comes out, and it’s all here, and when you’re done, you just throw it on your Web server, and you’re online.
  • SRC: Well, this is our domain, to write the page code, please look at the SRC folder.
    • Assets: Static assets, such as individual CSS, JS, etc.
    • Components: Common components, meaning that many components use one component, so that’s a good place to put it.
    • Pages: A place where the page components (or. Vue files in English) are stored.
    • Router: As the name suggests, is a place to put the router, as for how to configure, I do not want to explain now.
  • Static: You can put pictures here.
  • -Dan: You’re testing it? It doesn’t seem to be working. Not yet, anyway.
  • .babelrc: es6 syntax compiler configuration, meaning that your code has es6 syntax, but the browser does not know es6, rely on it to translate, let the browser know.
  • .editorConfig: Editor configuration, emmmmmm, I’m not sure what it does.
  • Gitignore: When submitting code, tell Git not to submit something, such as the node_modules folder, because it has a lot of stuff in it. You can’t wait a long time to submit your code every time.
  • .postcsrc. Js: Postcss configuration, you ask me what is postCSS? Look it up yourself.
  • Index.html: I don’t have to explain this, the entry file, which is the first thing the browser sees.
  • Package – lock. Json: Lock the version number of the package you installed. In other words, your NPM has downloaded a bunch of dependencies. If the new version is not compatible with the old version, it may not be able to run your project. Package-lock. json locks your version so that when someone else installs NPM, they can only download the same version as you.
  • Package: Basic information about the project, such as the name of the project, which dependencies are installed, and the version number, are all here.

Install dependencies

After reading everyone’s self-introduction, I believe you can almost recognize them, so let’s install some dependencies for development.

  • The installationelement ui, how to install? Again, open the command line tool, CD to the root directory of your project, and typenpm install element-ui --save-devWhen you’re done, take a look at the package.json file and see this as proof that the installation was successful.

  • The installationmockjs, as above, enternpm install mockjs --save-dev.

The introduction of the plugin

With the plugins installed above, we introduce them into the project so that all components can be called, which is called global import. Open main.js under SRC and introduce Element. Is it so easy?

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Copy the code

Project planning

First of all, we need to change the welcome page of vue for him. First, we need to open App. Vue under SRC, which is used to store all our page components, that is, the home page.
is a shorthand, traditionally
, you see, it’s just a tag. It’s just that it makes our code look high-end. This tag is our routing page, for example we registered a component in the routing, when routing to the corresponding component, this tag maps the corresponding component.

//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
...
</style>
Copy the code

Delete the img tag, the big log from the vue welcome page. But you’ll notice that app. vue doesn’t have all the gibberish on the welcome page. How do they show up? SRC/router/index.js SRC/router/index.js/index.js SRC/router/index.js/index.js/index.js Import HelloWorld from ‘@/components/HelloWorld’ If you are interested, you can open the alias in webpack.base.conf.js. If you are not interested, please skip it. /components/HelloWorld, when we have a deep directory hierarchy, we don’t have to always.. / Yes, it would be convenient. The second thing to note is that when we introduce a component, we can omit the suffix. Vue. The slash in path: ‘/’ represents the home page. If we change path: ‘test’, your address will be http://localhost:8080/#/test, okay?

//index.js
import Vue from 'vue'// Introduce vue import Router from'vue-router'// Import route import HelloWorld from'@/components/HelloWorld'Vue. Use (Router)export default new Router({
  routes: [
    {
      path: '/'// Route path name:'HelloWorld', // Route name Component: HelloWorld // corresponding component}]})Copy the code

conclusion

Hand tired, first write here, you digest, predict how things, and listen to the next decomposition. I will update the next chapter as soon as possible.

All chapters

  • Chapter I Installation of Scaffolding
  • Chapter two: Initial experience
  • Chapter 3 Login page
  • The fourth chapter axios
  • Chapter 5: Routing hook and plug-in development