vue projects and plug-ins

Creating vue project

method 1:

cmd executed vue ui

vue creates a socket, convenient and quick

Method 2:

Command line build

vue create v-proj  //创建项目名为v-proj的项目文件
>>>default (bable,eslint) //默认
    manually select features //自定义
    
(*)bable  //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6)
TypeScript  //js编程还是ts编程 
Progressive Web App(PWA) Support //前端优化组件,需要大量配置
(*)Router //前台路由
(*)Vuex //仓库 ,相当于全局的单例,每次页面刷新,重新加载仓库,为移动端准备,因为移动端不刷新
CSS Pre-processors  //css预编译器 less sass两个语法来进行css逻辑编译时,先将他们预编译为css语法
Linter/Formatter  //格式化代码,只有按照这个标准书写才不会报错
Unit Testing  // 测试
E2E Testing  // 测试

>>>
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y     //路由蝌蚪使用浏览器历史记录,Y

 Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json    //配信信息放的位置      

Save this as a preset for future projects? (y/N) N    
//N     

npm run server //启动服务 

Reconstruction of dependence

vue rinse your build dependencies depending on the configuration

Folder must contain public, src, package.json these three documents,

cd directory to file these three documents folder

carried outnpm install

If also lack other dependencies, install one by one according to a reminder to use npm.

pycharm project management vue

Add vue component is loaded, maintaining a long connection

vue project directory structure

├── v-proj
|   ├── node_modules    // 当前项目所有依赖，一般不可以移植给其他电脑环境
|   ├── public          
|   |   ├── favicon.ico // 标签图标
|   |   └── index.html  // 当前项目唯一的页面
|   ├── src
|   |   ├── assets      // 静态资源img、css、js
|   |   ├── components  // 小组件
|   |   ├── views       // 页面组件
|   |   ├── App.vue     // 根组件
|   |   ├── main.js     // 全局脚本文件（项目的入口）
|   |   ├── router
|   |   |   └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|   |   └── store   
|   |   |   └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|   ├── README.md
└   └── package.json等配置文件

vue project life cycle

Start project is to start the node-modules, then load main.js

1. Start the project, the main script file to load main.js

   Load vue environment, created with rendering components

   Read app.vue assembly, and rendering public of the index.html

   Loading system, then the existing third-party environment: router, store

   Load third-party environment with their custom configuration environment: keep adding later in the project.

2. router is loaded, parsed index.js router script file folder to complete the route - mapping between components (load views of large assemblies)

3. New View assembly .vue (, disposed views folder in the route), the jump set route, the component loading widget.

Summary: browser request / user => router widget mapping assembly user.vue => Replace <router-view App.vue assembly in user.vue /> placeholder

Note: 1 may be used <router-link to = "/ user"> User Page </ router-link> tag jump to complete

2.this. $ Router.push ( "/ user") can jump completion logic

vue file type component

<!--template负责组件的html结构,有且只有一个根标签-->
<template>
    <div class="home">
      <h1>zhuye</h1>
    </div>
</template>

<!--script标签负责js逻辑  逻辑固定导出,外界才可以导入  export default{导出内容}-->
<script>
  export default {
      data(){},
      methods :{},
  }
</script>

<!--style标签负责组件的css样式  谁想保持样式不变,谁就加上scoped,scoped可以将css局部化-->
<style scoped>

</style>

Global custom style configuration

method 1:

Disposed directly in the root component app.vue.

Method 2:

New static assets folder in the folder css, writing global css files in the folder. Main.js and use the importImport

import "./assets/css/global.css"

Method 3:

Official recommendations:

New static assets folder in the folder css, writing global css files in the folder. And use require the import main.js

require('@/assets/css/global/css')

Note: When importing files, you can use @directly to the src folder to represent

css file extension can not save

Lifecycle hook assembly vue

<https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA>

The life cycle vue components as a number line, the hook is in this node number line, each corresponding to a different period hooks, each hook is a callback function, to trigger a hook, you can trigger a callback function .

Each hook member as an example of all the component alone.

Common

1. created () {} is called when creating the assembly, can be used to perform a background data request
2. mounted () {} after the component added after completing the trigger, especially time-consuming large files, you can postpone the initial loading component to success, then slowly request.

router method

1. <router-view></router-view>Placeholder page components, written in app.vue root assembly

   <template>
     <div id="app">
       <router-view></router-view>
     </div>
   </template>

2. <router-link :to="{name: 'course'}">汽车页</router-link>A tag equivalent to a special

   Have equivalent class="router-link-exact-active router-link-active"properties a label

3. this. $ router returns an Object vuerouter

   this. $ route returns a dictionary

4. this. $ router.push ( "/ home") component Jump

   push method can not jump the current page of the current page

5. this. $ route.path the current page

Jump routing logic

• this. $ router.push ( "/ home") component Jump

  push method can not jump the current page of the current page

• this. $ router.go (-1) numbers indicate the history relative to the current page, just indicate forward, backward expressed negative, the absolute value of the digital representation of the number of steps.

Route Redirection

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },]

Routing parameter passing

Mode 1:? / Car / detail pk = 1

sender

//通过url,反引号中使用字符串format带参数
this.$router.push(`/course/detail?pk=${pk}`);

receiver:

//通过route字典中query的pk取值
this.pk = this.$route.query.pk  //query叫拼接参数

Configuration

path: '/course/detail',
name: 'course-detail',
component: CourseDetail

Mode 2: car / detail / 1

sender

//
this.$router.push({
    name: 'course-detail',
    query: {pk: pk}});

receiver

this.$route.params.pk; //params路径参数

Configuration

path: '/course/:pk/detail',  //:pk是有名分组
name: 'course-detail',
component: CourseDetail

note

• Import es6 syntax

  import 别名 form "资源"

  es6 all import, import and export only of others, have to export in order to import

• When you import a file, you can use @the path after to represent the absolute path to the src folder after using the @, are not automatically