Front small white simple summary, also hope you big guy more to teach ~

I. Vue environment construction (Vue- CLI scaffolding)

1, you need to install nodejs;

To install nodejs, see:

2. Install vUe-CLI scaffolding

Vue-cli is the official scaffolding for quickly building this single-page application.

npm install -g @vue-cli   // 3.x version recommended this, with visual create project vue UI can start
npm install -g vue-cli  / / 2. X version
Copy the code

Create a project

  • Visually create a project

1) Console Enter commands to open the visual panel

vue ui
Copy the code

2) Select Create Project, next

3) Select manual configuration for the first creation, next step

4) Select Router. If vuEX is not used for the time being, do not select Router. Next step

5) Select the version of VUE, esLint standard configuration, and create the project

The default name is saved for use next time

6) Install dependency packages

Select run dependencies, installaxios

7) Select task, select Serve, and click Run. If the following screen appears, the operation is successful

  • The command line creates the project

1) Create a working directory for your vue projects

2) Open the console, go to your working directory, and select the WebPack Template initialization project

	// vue_demo is your project name, no capital letters
	vue init webpack vue_demo 
Copy the code

3) Next, there are some options that need to be manually selected before installation

  • First you download the template

  • Confirm the project name, enter confirm or modify it

  • Confirm the item description. Enter to confirm or modify the item description

  • Enter the author name

  • Choose the compilation method, choose the first recommended one

  • Select whether to install vUE routes, enter or yes

  • If you are not sure that the EsLint plugin will comply with the EsLint specification, select n and install it according to your own needs
  • Whether to install the two items used in the test, do not need to install n

  • In the last step, there will be an option to install, just choose what you like

Yes, use NPM; This is to select the NPM installation project; Yes, use Yarn; Install No,I will…. using YARN Myself; This is a way to let you choose the installation

  • At this point, the installation is complete

  • Project directory structure:

Node_modules contains all the dependent modules

  • Project structure (I borrowed a picture) :

  • If port 8080 is occupied, you can change the port number in the index.js file in the config directory

  • Running projects:
npm run dev
Copy the code

Project packaging:

 npm run build
Copy the code

2. Page entry: main.js

// Each vue project is a new instance of vue
new Vue({
  // El is short for Element and binds the DOM node to the vue instance
  el: '#app'./ / the vue routing
  router,
  / / the vue components
  components: { App },
  // Render the app component as a template for the page
  template: '<App/>'
})
Copy the code

Three, Vue file simple description

1. Component structure of Vue

The Vue component structure consists of three parts

  • Template: template, which is HTML
  • Js: script
  • Style: STYLE, CSS

2. Configure routes

  • Route file: index.js under router
import Vue from 'vue'
import Router from 'vue-router'
// @/ represents the SRC root directory
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [{// Access path
      path: '/'./ / component name
      name: 'HelloWorld'.// The component to render
      component: HelloWorld
    }
  ]
})

Copy the code
  • In the app component, it is introduced in the form of, which is actually a container for rendering the component configured in the route.