Enter the following command in the cmd window to verify that the vue installation is successful. Note: the V here is uppercase. If successful, the version number will be printed

vue -V

2. Build the project with vue-cli

2.1 Use scaffolding to create project skeleton

In the cmd command window, go to the project storage directory and run the following command:

vue init webpack spa1

spa1 is the project name, which can be entered according to the implementation.

Note 1: The cmd command line window displays Chinese garbled characters, mostly because the character encoding of the cmd command line window does not match. Modify the character encoding of the cmd window to UTF-8, execute in the command line: chcp 65001, switch back to Chinese: chcp 936, this The two commands only take effect in the current window, and the previous encoding will be restored after restarting. Can't manage.

Next, the installer will enter a question-and-answer installation mode:

1) Project name: project name, the default is the name spa1 when you entered it, press Enter directly
2) Project description: project description, press Enter directly
3) Author: Author, just fill in or press Enter
4) Vue build: multiple choice , generally choose the first

Runtime + Compiler: recommended for most users //Runtime plus compilation, officially recommended

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时

5) Install vue-router: Whether you need vue-router, Y chooses to use it, so that the generated project will have related routing configuration files
6) Use ESLint to lint your code: Whether to use ESLint to limit your code errors and styles . N

Set up unit tests (Y/n) N
7) Setup e2e tests with Nightwatch?:
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM (select this option)
> Yes, use Yarn
> No, I will handle that myself

After all selected and press Enter, the project is generated. The following content appears to indicate that the project is created.
#Project initialization finished!
#==========================

2.2 Go to the new project directory and install the required modules

This step is similar to maven installing dependencies through pom files.
Order:

npm install

Need some traffic, please use a faster network.

After the installation is complete, in the command window, go to the project directory and run the following command:

npm run dev

Run the project, and it will appear: Your application is running here: http://localhost:8080, which means the operation is successful. Enter http://localhost:8080 in the browser address bar to view.

2.3 How to modify the port number

When the project is running, the default port is 8080. If other programs also use this port, it will cause conflicts. If tomcat also uses 8080 by default, the port number needs to be changed to avoid conflicts.
Open the config/index.js file in the project directory and modify the port in the dev part.

2.4 Add element-ui module

When adding element-ui, stop the service first, and use the following command to install the element-ui module.

npm install element-ui -S

Note 1: Use vue+elementUI to create a SPA project. In general, its project structure consists of the following:
* Vue + ESLint + webpack + elementUI + ES6
Vue: the main framework
* ESLint: Help us check for syntax errors in Javascript programming, so that in a Multiple developers in the project can achieve a consistent syntax
* Webpack: is a static module bundler for modern JavaScript applications. The core configuration in the whole project
* elementUI: is a set of style framework based on vue, there are many packaged component styles in it
* ES6: the full name is ECMAScript6.0, which is the next version standard of JavaScript, released in 2015.06

2.5 Detailed explanation of package.json

Under the root directory of each project, there is generally a package.json file that defines various modules required by the project, as well as project configuration information (such as metadata such as name, version, license, etc.). According to this configuration file, the npm install command automatically downloads the required modules, that is, the running and development environments required to configure the project.
For details, see the relevant notes in the data "package-detailed.json"

3. -g, -S, -D parameters in the install command

Order	meaning
npm install	Download all dependent modules configured in dependencies and devdependencies in "package.json" and save them to the project's node_modules directory
npm install xxx -g	Install globally, download dependent modules, and save them to the %node_home%\node_global\node_modules directory
npm install xxx -S	Write to the dependencies object of package.json and save it to the project's node_modules directory
npm install xxx -D	Write to the devDependencies object of package.json and save it to the project's node_modules directory

Note 1: When git clone the project, there is no node_modules folder in the project file, why?
We know that this file (project_home\node_modules) stores the dependent modules used in our project development. This folder may be hundreds of megabytes in size. If it is placed on github, it will be very slow for other people to clone. At this time, I thought of using a package.json dependency configuration file to solve this problem. In this way, when everyone downloads this project, they only need to enter the project directory and directly npm install npm will go there to find the required function library, that is, dependencies.

The full name of the abbreviated command, pay attention to case, -S, -D are all uppercase

Order	short name
install	i
--save	-S
--save-dev	-D
--global	-g

4. Vue project structure description

folder	document	effect
build		This folder is mainly for some configuration of webpack
	webpack.base.conf.js	The basic configuration of webpack, development environment, and production environment are all dependent on
	webpack.dev.conf.js	webpack development environment configuration
	webpack.prod.conf.js	webpack production environment configuration
	build.js	Production build script
	vue-loader.conf.js	This file is the configuration file for handling .vue files
config folder		configuration file
	dev.env.js	Configure the development environment
	prod.env.js	Configure production environment
	index.js	This file configures the proxy server, for example: modification of the port number
node_modules		The folder for storing the npm installation package generated according to the package.json configuration during npm install
src folder		Source directory (the most used folder in development)
	assets	Shared styles and pictures
	components	The place where the business code is stored is divided into components for storage, a page is a component, and a page will also contain many components
	router	set route
	app.vue	vue file entry interface
	main.js	Create a vue instance corresponding to App.vue, which is also an entry file, corresponding to the entry configuration in webpack.base.config.js
static folder		The stored files will not be processed by webpack and can be directly referenced. For example, if you want to refer to the swf file, you can configure it in webpack. You can also directly place the swf file in this folder for reference.
package.json		There are two parts to this file that are useful: setting commands in scripts and dependencies and devDependencies, which correspond to global download and local download dependencies respectively

5. What is a *.vue file

*.vue file is a custom file type that describes a Vue component with HTML-like syntax. Each .vue file contains three types of top-level language blocks <template>, <script> and <style>. These three parts represent html, js, and css respectively.

Note:
1) HTML code cannot be directly wrapped in <template></template>, but an html tag must be placed inside to wrap all the code. In general, the <div></div> tag is used to contain other codes , other tags can also be used, as long as there is a root element.

<template>
    <div>
        ...
    </div>
</template>

2) The js code is written in the <script> tag and exported through export

<script>
    export default {
        name: 'App'
    }
</script>

6. Startup process

Flow chart:

1) When executing npm run dev, it will look for the package.json file in the current directory, which is somewhat similar to Maven's pom.xml file, including the name version of the project, project dependencies and other related information.
2) As you can see from the package.json file, after starting the npm run dev command, the build/webpack.dev.conf.js configuration will be loaded and webpack-dev-server will be started
3) webpack.dev.conf.js is introduced The contents of many modules include the configuration files of the server environment in the config directory.

const config = require('../config')

4) The index.js file in the config directory contains the necessary configuration information for starting services such as host and port. The default port number can be modified in this configuration file. Configure in this file as follows:

index: path.resolve(__dirname, '../dist/index.html'),

The index.html in the configuration is the index.html file in the project root directory.
5) The content of index.html is very simple, mainly to provide a div for vue mount.
6) In main.js, vue, App and router modules are introduced, a vue instance is created, and the content of the App.vue module is mounted to the div tag of index.html whose id is app, and a route is bound configuration.
7) main.js places the content of the App.vue module under the div tag of index.html to view the content of App.vue. The content of this page has a logo and a <router-view/>, <router-view The content of /> is determined by the router configuration.
8) The index.js file in the router directory is where routing is configured. It can be seen from the configuration that when accessing the path "/", the content of the HelloWorld template will be placed in the <router-view/> mentioned above.
9) HelloWorld mainly contains some Vue introduction information.
10) The composition of the page: index.html -- (included) --> App.vue -- (included) --> HelloWorld.vue

7. Development example

7.1 Make a custom component Welcome

1) Create a Welcome.vue custom component under components

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
  </div>
</template>

<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',

  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

<!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

2) Configure routing in router/index.js. When configuring routing, pay attention to importing components first

import Welcome from '@/components/Welcome'

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'Welcome',
      component: Welcome
    }
  ]
})

We changed the HelloWorld displayed by default to the Welcome component. Run the system to observe the page display.

7.2 Add "User Management" and "About Us" components

A new views directory is added under src to store business components, and components are used to method public components.

1) Define the About component

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>关于我们</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'About',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

2) Define the UserMsg component

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

3) Define the route in router/index.js, and pay attention to import the component first when configuring the route

import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....
    {
        path: '/About',
        name: 'About',
        component: About
    },
    {
        path: '/UserMsg',
        name: 'UserMsg',
        component: UserMsg
    }

4) Add router-link to the Welcome component to configure the routing path. The modified content is as follows:

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <p>
      <router-link to="/UserMsg">用户管理</router-link>
      <router-link to="/About">关于我们</router-link>
    </p>
    <!-- 这里的配置的router-view是没有效果的，起效的时候App.vue中的
    router-view，这一点通过页面效果可以看出来，在点击“用户管理”或“关于我们”
    后，msg定义的提示信息没了，但vue的logo还在。
    <div>
      <router-view/>
    </div> -->
  </div>
</template>

<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',

  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

7.3 Nested Routing

Under the user management module, create a user registration and change the password to demonstrate nested routing

1) Create user registration UserRegister

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户注册</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserRegister',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

2) Password modification UserPwdUpdate

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>修改密码</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserPwdUpdate',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

3) Configure
routing Before configuring routing, import components first

import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'

Configure routing:

    //此处只显示了用户管理部分路由配置，为嵌套路由
    {
      path: '/UserMsg',
      name: 'UserMsg',
      component: UserMsg,
      //注意children单词不要写错，如果写错程序不会报错，但效果出不来!!!!
      //以"/" 开头的嵌套路径会被当作根路径，所以子路由的path不需要添加 "/" !!
      children: [
        {
          path: 'UserRegister',
          name: 'UserRegister',
          component: UserRegister
        },
        {
          path: 'UserPwdUpdate',
          name: 'UserPwdUpdate',
          component: UserPwdUpdate
        }
      ]
    }

4) Add router-link to the user management component (UserMsg) to configure the routing path. The added components are as follows:

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
      <p>
        <router-link to="/UserMsg/UserRegister">用户注册</router-link>
        <router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link>
      </p>
      <div>
        <!--
        用户注册于密码修改为用户管理的子模块，所以在用户管理组件中
        使用router-view用于展示用户注册与密码修改组件。如果此处不用
        则点击用户注册与密码修改时没有任何效果
        -->
        <router-view/>
      </div>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

Show results:

Interview knowledge points:

Understanding of the basic directory structure of vue
Difference between install -g -S -D
The meaning of the @ symbol: @ represents the src directory, and @ is configured in the /build/webpack.base.conf.js file
Startup Rationale
Basic understanding of package.json

Install vue-cli & use vue-cli to build the project

1. vue-cli installation

1.1 Installation prerequisites

1.2 What is vue-cli

1.3 Install vue-cli