429 vue scaffolding

A, vue is a single-file assembly

Director: Prior registration component What are the disadvantages?

1- lack of syntax highlighting

2- bad overall format

3- No special write css code, etc.

Reference: vue => Tools => single file component

What is a single-file assembly? Suffix .vue file
Three components (code block: scaffold automatically prompt) single-file assembly

template (template structure)
Script code logic component
style style

important point :
- Single-file components, can not be used directly in the browser, this must be webpack packaging tools, post-processing, you can use the browser
- vue-loader other configurations

Second, the introduction scaffolding

2.X - Background Management System

3.X - vuex

vue-cli is vue scaffolding tool
** Role: ** vue-cli provides a command, by this command we can quickly generate a direct vue project ( vue init XX).
The basic structure of the project, as well as configuration items webpack all configurations Well
Why scaffolding tool ???

Because webpack configuration cumbersome, want to prevent a group of vue, but not webpack developers, so the author directly vue all items used in the configuration of all written for you, so developers do not need to go to the configuration basis webpack the configuration items
In other words, the use of this scaffold vue-cli tool, no longer have to worry about webpack configuration problem, we just need to write front-end vue code to implement the functions can be

Third, the use of scaffolding tools

Installation: npm i -g vue-cli
Initialization vue project: vue init webpack 项目名称
- For example: vue init webpack vue-demo01
Project installation process:

? Project name # 回车
? Project description # 回车
? Author  # 回车
? Vue build standalone  # => 运行时+编译 => 详见下面的问题1 
? Install vue-router? # Yes
? Use ESLint to lint your code? # Yes => 详见下面的问题2
? Pick an ESLint preset Standard  # standard
? Set up unit tests # No
? Setup e2e tests with Nightwatch? # No
? Should we run `npm install` for you after the project has been created? # (recommended) npm

How to get started

To get started: 

cd vue-demo01
npm run dev

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
- --inline: means the information is displayed where
- -progress: progress bar
- --config: specify which file as webpack profile development

Fourth, the project file, vue project logic process description

The first pass: Folder, the second time to fine-file

# build - webpack 相关配置
- build.js - 生产环境构建代码
- check-version.js - 检查 node、npm 等版本
- util.js 构建工具相关
- vue-loader.config.js - vue-loader 的配置文件
- webpack.base.conf.js - webpack 的基础配置
- webpack.dev.conf.js - webpack 开发环境配置
- webpack.prod.conf.js - webpack 发布环境配置

# config - vue 基本配置文件(比如: 监听端口(17),  使用 eslint: (26))
- dev.env.js - 开发环境变量
- index.js - 项目的一些配置
- prod.env.js - 生成环境变量

# node_modules - node 安装的依赖包

# src - 资源文件夹,  以后我们就在这个目录下写代码
- assets - 静态资源 (图片 css 都放在这)
- components - 公用组件
- router - 路由
- App.vue - 项目的根组件
- main.js - 项目的入口文件(总逻辑)

# static - 静态资源不要打包的文件 (图片 json 数据之类的)
- .gitkeep git 保持文件, 因为 git 上传, 会忽略空文件夹

# .babelrc - babel 配置文件,  (es6 语法编译配置, 将 es6 转化为浏览器能够识别的代码)

# .editorconfig - 定义代码格式
- charset = utf-8 编码 utf8
- indent_style = space 缩进 空格
- indent_size = 2 缩进字符
- end_of_line = lf 回车作为换行的标记
- insert_final_newline = true 最近一空白行作为结尾
- trim_trailing_whitespace = true 清除最结尾的空白
- 如果使用 ?
- 1. 安装 vscode 的 editorConfig for vscode
- 2. eslint 检测修复后

# .eslintignore - eslint 检测忽略的地方
- /build/
- /config/
- /dist/
- /\*.js 根目录下带.js 的

# .eslintrc.js - eslint 的配置文件

# .gitignore - git 的忽略文件

# .postcssrc.js - css 配置文件 (啥也没有处理)

# index.html - 页面入口

# package.json - 项目配置文件

4.1 Reference: standard

[standard code specification] (HTTPS: //standardjs.com/readme-zhcn.html )

4.2 Reference: src

static resource assets
components assembly
App.vue root component => specified route outlet
- After the scaffolding, all of the components will render to the app.vue
The app #app or index.html in #app, app.vue will cover the former
can verify by adding a title attribute respectively
Export routing component template to write in app.vue
main.js
- Entrance js file
- Action: Create vue instance, introduction of other components in and hung to be introduced vue instance [routing]
- Vue.config.productionTip = false ==> no printing tips
- Detecting no new: see the back of detecting warning
```
new Vue({
  el:  '#app',  // 目标显示
  router,    // 挂载路由
  components:  { App },  // 注册组件 App
  template:  '<App/>' // 模板显示组件 app
})
```
route / index.js => Route
Always remember: Vue.use(Router)the modular construction must install the plug-routing, .js is a module
The official website also mentioned https://router.vuejs.org/zh/installation.html

4.3 draw logic diagram (several entrances document describes the project)

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo01</title>
</head>

<body>
    <!-- （1）运行服务器会打开index.html入口页面；（2）然后自动引入main.js（会被打包成app.js）；（3）main.js引入根组件App.vue 、路由router；（4）根组件App.vue负责显示所有的子组件；（5）路由router负责管理子组件（路由规则管理）；（6）components下是子组件；（7）assets是css、图片、js等静态资源 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 自动引入的app.js就是主入口文件main.js -->
</body>

</html>

main.js

// 引入vue、App根组件、路由router，然后实例化vue，挂载路由，指定实例化vue的组件是根组件

import Vue from 'vue'
import App from './App' // （1）App.vue 的后缀 可以省略；（2）引入根组件。
import router from './router' // （1）引入路由，在下面挂载；（2）省略了router目录下的index.js

Vue.config.productionTip = false

/* eslint-disable */
new Vue({
    // el : 指定边界 占位置 【不能删】
    el: '#app',
    router, // 挂载路由
    components: { App }, // 注册组件
    // （1）template > el；(2)App组件当成标签来用
    template: '<App/>'
})

index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import HelloWorld from '../components/HelloWorld.vue'
// import HelloWorld from 'C:/....../src/components/HelloWorld'

// Vue 把 router 当成组件安装了一下
Vue.use(Router)

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

App.vue

<template>
    <div id="app">
        <img src="./assets/logo.png" />
        <!-- APP.vue是根组件，因为这里有router-view，出口，所有的出口都显示在这里。 -->
        <router-view />
    </div>
</template>

<script>
    export default {
        name: "App"
    };
</script>

<style>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

V. Problem

5.1 - Question 1: Both compilers mode and @

Reference: vue.js => Installation => Construction of different versions of this explanation

We chose Runtime + Compiler mode: (+ runtime editor)
Run-time mode : Vue used to create instances, such as rendering and processing virtual DOM code. Removing essentially all other compiler.
Compiler : template string will be used to compile the code JavaScript rendering function.

// 需要编译器
new Vue({
  template:  '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div',  this.hi)
  }
})

Complete Version selection : ES Module (based build tool): vue.esm.js
- build => webpack.base.config.js => 37 rows Alias (alias) 'vue $': 'vue / dist / vue.esm.js',
@ : It is the absolute path of src
- build => webpack.base.config.js => 38 rows Alias (alias) '@': resolve ( 'src'),

router/index.js =>
	import HelloWorld from '@/components/HelloWorld'
	import HelloWorld from 'C: /users/.../src/components/HelloWorld'

5.2 - Problem 2: ESLint

** concept: ** ESLint is the identification and reporting tool for pattern matching in JavaScript code, its goal is to ensure the consistency of the code and avoid errors.
- In vscode and other editing tools, you can prompt syntax error
- In many ways, it JSLint, JSHint similar, apart from a few exceptions:

How to use eslint?

1- install vscode plug ESlint
2-vscode add some configuration settings in

 "editor.formatOnSave":  true,  // 每次保存的时候自动格式化
  "eslint.autoFixOnSave":  true,  // 每次保存的时候将代码按eslint格式进行修复
  "eslint.validate":  [
    { "language":  "html",  "autoFix":  true }, 
    { "language":  "vue",  "autoFix":  true }, 
    { "language":  "javascript",  "autoFix":  true }, 
    { "language":  "wpy",  "autoFix":  true }
  ], 
  "prettier.eslintIntegration":  true,  // #让prettier使用eslint的代码格式进行校验
  "javascript.format.insertSpaceBeforeFunctionParenthesis":  true, 
  "editor.formatOnType":  true // 让函数(名)和后面的括号之间加个空格

** Close Eslint: **
- Reference: config / index.js ==> 26 line: dev.useEslint set to false
- Restart Project: npm run dev

5.3 question 3: vscode format plug-in installation Prettier

Installation vscode plugPrettier -Code formatter
Function. 1 : Shift + Alt + F. => Formatting code
Function 2 : with eslint: see above Configure a problem

5.4 Question 4: Detection Warning

eslint-disable-next-line # 忽略检测下一行  可以使用单行注释/多行注释, 其他都是多行注释
eslint-disable # 忽略当前整个文件  多行注释   /*    */

eslint-disable no-new # 忽略前面是new开头

Sixth, project presentations

Preparation: Turn on the server + database

What vue project to learn?

How to use vue with scaffolding tools to complete a project
Use ElementUI learning component library
business

3.1 Logging In and Out
3.2 User Authorization + + + role menu
3.3 Commodity Module

Seven open a local server

** Draw: ** Interface Access Path:
front page ===> Interface server ===> Database Servers ==> Database

The first small step: Open: database server

Open phpStudy, click启动

The second small step: Import Database

turn on navicat
Click 连接: Creating a MySQLconnection
Username and Password: root-root (can not scrawl) and this is the same configuration in the config
Create a database: shop_adminDo not scrawl, select the countdown find unt-8
Double-click to open the database
Import sql语句=> Right Execute SQL File => shop-api last sql file

If nothing happens: Table => Right Refresh

The third small step: open interface server

turn on shop-api
run npm start
Show success: API 接口服务启动成功，占用端口 8888

The fourth small step: test interface

http: //localhost: 8888/api/private/v1/login?username=admin&password=123456

项目使用接口 :  (记得保存)
// shop-api里面有

The fifth small step: Use

Every day to do the project before:
1. Each must first open phpStudythemySql
1. Open every time shop-api, runningnpm start

notes

# 脚手架创建项目

1. 安装脚手架 : `npm i vue-cli -g`
2. 检测 : `vue -V` (version)
3. 使用 : `vue init webpack demo01`

```js
> npm 清除缓存
> 1. 路径 : C:\Users\ma250\AppData\Roaming\npm-cache
> 2. 命令  npm cache clean -f

> 1. 假如  npm i XXX 报错了
> 错误 : LINK  NetWork 找不到包
> 清缓存 : `npm cache clean -f `
> npm i XXX

> 2. vue init webpack demo01  报错
>   清缓存 : `npm cache clean -f `
> npm i  ? 成功率低
>  vue init webpack demo01  再来一次
```


# 文件介绍
- build - webpack 的配置文件
- config - vue 项目的配置文件
- node_modules 依赖包
- src : 源文件 (重点)
- static - 静态文件 (不打包的)
  .gitkeep 保持一个空文件夹能够上传到 github/码云等托管代码网站
- .editorconfig 编辑器配置

  - 1. vscode 插件 : `EditorConfig fro VS Code`  【Vetur】
  - 2. 找到 .editconfig 配置

- .eslintignore eslint 忽略检测的部分
- .gitignore git 上传忽略的
- .postcssrc.js 处理 css 的配置文件
- index.html 入口页面


# src
- assets - 静态资源 (打包的)
- components 组件
- router 路由
- app.vue 根组件


# eslint
1. 作用 :检测代码是否规范 , 保证代码的一致性 和避免错误

2. 如何使用
- 安装 vscode 插件 : `ESLint`
- 设置配置

3. ctrl + S => 自动格式化 + 修复
4. 参考 : Prettier + Standand

5. 两个忽略注释
- 忽略下一行 : // eslint-disable-next-line /_ eslint-disable-next-line _/
- 忽略文件的全部警告 /_ eslint-disable _/

# @ 其实就是 src 的绝对路径

Syntax eight modules, ES6 (based webpack base class)

8.1 export default default export a module (simple type complex type +)

Export: export default

The default can only export a

let str = 'abc'
let num = 20;
let obj = { name : 'zs' }

export default num
// export default obj

Import: import
Import names can be arbitrary

import res from './a.js'
console.log(res)

8.2 export export multiple modules are placed in an object

** Export: export **

// 逻辑模块 
// 登录一个函数
export let login = () =>  {
  console.log('登录');
}
// 注册一个函数
export let register = () =>  {
  console.log('注册');
}

Import: import

// 方式1
import * as res from './a'
console.log(res);
res.login()
res.register()

// 方式2
import { login,  register as reg } from './a'
login()
register()

8.3 import module

import axios from 'axios';

a.js

// 导出一些数据
let num = 30
let obj = { name: 'zs' }

// 只能导出一个 default 默认 只能由一个
export default num
export default obj

// 可以这样写
export default {
    num,
    obj
}


// 登录
let login = () => {

}


// --------------------------------



// 导出 登录函数
export let login = () => {
    console.log('login---')
}

// 导出注册函数
export let register = () => {
    console.log('register----')
}

mian.js

/**
 * 1. import + export default
 * 2. import + export
 * 3. import axios from 'axios'
 *
 * axios.get().then()
 */

/**
 * 1. import + export default
 *  import 引入
 *  export default  导出
 */

// res 可以随便写
import aaa from './a.js'
console.log(aaa)


// ---------------------------------------- 


/**
 * 2. import + export  【export导出的是对象】
 */
//  export 导出的是一个对象 (登录+注册)
// 方式1 :
import * as res from './a.js'
console.log(res)
res.login()
res.register()

// 方式2 :
import { login, register as reg } from './a.js'

login()
reg()


// -----------------------


// 解构
let obj = {
    name: 'zs',
    age: 30
}

function test(obj) {
    // let n = obj.name
    // let a =  obj.a

    let { name: n, age } = obj
    console.log(n, age)
}

test(obj)

// 起别名 as 或者  :