tmm-tommy

入门Vue.js基础学习笔记记录，遇坑!

Vue.js基础学习笔记

我的主页:http://106.13.185.176:8889/#/home

资源免费提供，欢迎访问!

1.起步

1.1、文档

官方中文api：https://vuejs.bootcss.com/guide/

1.2、v-bind实例化变量传递

创建基础文件:index.html、style.css、app.js

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>Vuetitle>
head>

<body>
    <div id="vue-app">
        
        <h1>{
    { name }}h1>
        
        <p>{
    { greet("name") }}p>
        
        <p>
            
            
            <a :href="website">跳转a>
        p>
        
        <p v-html="websiteTag">
        p>
    div>
body>
<script src="app.js">script>

html>

注意：

用于加载vue

//—

{ { name }}

{ { greet("name") }}

app.js

//实例化vue对象
new Vue({
     
    el: "#vue-app", //elemenr,注入一个容器
    data() {
      //返回容器的对象
        return {
     
            name: "Tommy",
            echat: "20",
            website: "https://www.baidu.com",
            websiteTag: '跳转'	
        }
    },
    methods: {
     
        // // 第一个中写法,准备一个方法
        // greet: function () {
     
        //     return "Good night " + this.name;
        // }
        //第二种写法，准备一个方法
        greet(time) {
     
            //使用反引号，使用变量都得用${}
            return `Good ${
       time} ${
       this.name}`;
        }
    },
})

注意:

el: “#vue-app”, //elemenr,注入一个容器

后只能在这个容器里获取防护ide值

style.css

暂时没有用到

1.3、v-on事件绑定

app.js

new Vue({
     
    el: "#vue-app",
    data() {
     
        return {
     
            age: 10,
            x: 0,
            y: 0
        }
    },
    methods: {
     
        // 准备一个加一的方法
        add(v) {
     
            this.age += v;
        },
        subtract(v) {
     
            this.age -= v;
        },
        // 改变鼠标获取xy
        updateXY(event) {
      //这里注意调用该方法不能写成updateXY(),他会误以为你没有给参数，得写成updateXY
            this.x = event.offsetX;
            this.y = event.offsetY;
        },
        // 监听键盘按下的方法
        dow() {
     
            alert("你按下了键盘后并且按了alt键+enter键")
        }
    },
})

注意方法里调用属性值，使用this.属性名

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    
    <link rel="stylesheet" href="sytle.css">
    <title>dome02title>
head>

<body>
    <div id="vue-app">
        <p>
            我的年龄 {
    { age }}
        p>
        
        <button @click.once="subtract(1)">减一年button>
        <button v-on:click="add(1)">加一年button>
        <div id="mainDiv" v-on:mousemove="updateXY">
            x:{
    { x }},y:{
    { y }}
        div>
        
        <input type="text" placeholder="输入名字" @keydown.atl.enter="dow()">
    div>
    <script src="app.js">script>
body>

html>

注意:

事件绑定 v-on:,简写为@

调用mousemove方法不能updateXY(),

.once得一些修饰符，下面有说到

@keydown.atl.enter:

keydown：监听按下键盘
.alt.enter:按下alt键+enter键触发方法

sytle.css

#mainDiv {
     
    width: 300px;
    height: 300px;
    border: 1px solid sienna;
    text-align: center;
}

事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

1.4、v-model双向数据绑定

app.js

new Vue({
     
    el: "#vue-app",
    data() {
     
        return {
     
            name: "",
            age: ""
        }
    },
    methods: {
     
        getAge() {
     
            //这里使用$refs获取传入的对象age里的value并赋给属性age,也能实现双向数据绑定
            this.age = this.$refs.age.value;
        }
    },
    // watch是用来监听属性只改变，只建议用来使用调式代码.
    watch: {
     
        age(v, o) {
     
            console.log("age的改变:新值:" + v + "，原始值:" + o);
        }
    },
})

注意:

&refs:获取ref传入的对象

watch是用来监听属性只改变，只建议用来使用调式代码.

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>dome03title>
head>

<body>

    <div id="vue-app">
        
        <input type="text" v-model="name">
        <p>
            {
    { name }}
        p>
        
        <input type="text" ref="age" @keydown="getAge()">
        <p>
            {
    { age }}
        p>
    div>
    <script src="app.js">script>
body>

html>

注意：

使用v-model来实现双向数据绑定,一般只在:input,select,textarea。

使用ref和$refs获取对象也能实现双向数据。

v-model的修饰符
v-model.lazy 只有在input输入框发生一个blur时才触发
v-model.trim 将用户输入的前后的空格去掉
v-model.number 将用户输入的字符串转换成number

1.5、computed属性数据方法

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>dome04title>
head>

<body>
    <div id="vue-app">
        <button @click="a++">Add abutton>
        <button @click="b++">Add bbutton>
        <p>A:{
    { a }}p>
        <p>B:{
    { b }}p>
        
        <p>age+A :{
    { addA }}p>
        <p>age+B :{
    { addB }}p>
    div>
    <script src="app.js">script>
body>

html>

注意:

调用computed方法不能带有();

app.js

new Vue({
     
    el: "#vue-app",
    data() {
     
        return {
     
            a: 0,
            b: 0,
            age: 0
        }
    },
    // methods: { //methods只要数据发生改变就回调用
    //     addA() {
     
    //         console.log("执行了addA");
    //         // return this.a + this.age;
    //     },
    //     addB() {
     
    //         console.log("执行了addB");
    //         // return this.b + this.age;
    //     }
    // },
    computed: {
      //computed属于计算属性，只有调用该方法才会执行
        //但每个方法一定有返回值
        addA() {
     
            console.log("执行了addA");
            return this.a + this.age;
        },
        addB() {
     
            console.log("执行了addB");
            return this.b + this.age;
        }
    },

})

注意:

如果使用methods只要属性有改变方法，将会全部调用。

computed调用时一定有返回值。

1.6、动态改变样式技巧

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>dome05title>
    <link rel="stylesheet" href="sytle.css">
head>

<body>
    <div id="vue-app">
        
        <button :class="btSytle" @click="isColor=!isColor">修改样式button>
    div>
    <script src="app.js">script>
body>

html>

注意:

:class绑定样式，使用isColor改变属性值

app.js

new Vue({
     
    el: "#vue-app",
    data() {
     
        return {
     
            isColor: false
        }
    },
    // 一般动态改变样式，使用计算属性方法
    computed: {
     
        //准备改变属性的计算属性方法
        btSytle() {
     
            return {
     
                bt1: this.isColor
            };
        }
    },
})

注意:

一般改变样式都使用计算属性方法。

btSytle返回一个class对象绑定 {样式名(id,class,Tag):属性值}

sytle.css

.bt1 {
     
    background: wheat;
}

.bt2 {
     
    background: red;
}

1.7、v-for,v-show判断是否显示标签控件

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>dome06title>
head>

<body>
    <div id="app-vue">
        条件1 <button @click="isShow=!isShow">{
    { isShow }}button>
        条件2 <button @click="isShow2=!isShow2">{
    { isShow2 }}button>
        
        <p v-if="isShow">
            显示if
        p>
        <p v-else-if="isShow2">
            显示else if
        p>
        <p v-else>
            显示else
        p>
        
        <p v-show="isShow">
            显示v-show
        p>
    div>
    <script src="app.js">script>
body>

html>

注意:

v-if与v-show的区别:

v-if:直接把标签去掉删掉

v-show:display: none;隐藏

app.js

new Vue({
     
    el: "#app-vue",
    data() {
     
        return {
     
            isShow: false,
            isShow2: true
        }
    },
})

1.8、v-for遍历值显示标签

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>dome07title>
head>

<body>
    <div id="app-vue">
        
        <div v-for="(user,index) in users">
            <p>
                {
    { index }}名字{
    { user.name }}年龄:{
    { user.age }}
            p>
        div>
        <hr>
        
        <template v-for="user in users">
            <template v-for="(val,key) in user">
                <p>
                    key:{
    { key }},val:{
    { val }}
                p>
            template>
        template>
    div>
    <script src="app.js">script>
body>

html>

注意：

div与template容器使用v-for的区别：

div会遍历容器，template只遍历内容

v-for遍历对象(val,key)顺序不能改

app.js

new Vue({
     
    el: "#app-vue",
    data() {
     
        return {
     
            users: [{
     
                    name: "小米",
                    age: 16
                },
                {
     
                    name: "小明",
                    age: 20
                },
                {
     
                    name: "小猪",
                    age: 19
                },
                {
     
                    name: "小王",
                    age: 18
                },
            ]
        }
    },
})

1.9、Vue里的全局机制(component)

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <title>dome09title>
head>

<body>
    <div id="app-vue1">
        <p>
            {
    { title }}
        p>
        <p>
            <Greeting>Greeting>
        p>
    div>
    <div id="app-vue2">
        {
    { title }}
        
        <p>
            {
    { getApp2 }}
        p>
    div>
    <script src="app.js">script>
body>

html>

注意:

调用全局控件:

app.js

// 全局变量
let data = {
     
    name: "名字",
}
// 全局控件
Vue.component("Greeting", {
     
    //html模板
    template: "全局控件取全局变量:{
     { data.name }}
",
    //也可返回一个对象
     data() {
     
        return {
     
            
        }
    }
})
const vue1 = new Vue({
     
    el: "#app-vue1",
    data() {
     
        return {
     
            title: "第一个标题"
        }
    },
    methods: {
     

    },
})
new Vue({
     
    el: "#app-vue2",
    data() {
     
        return {
     
            title: "第二个标题"
        }
    },
    computed: {
     
        getApp2() {
     
            return vue1.title;
        }
    }
})

注意:

全局变量定义在外面即可.

全局控件定义时给名，并在template里写入模板.

在容器app2想调用app1中的属性值，得实例化app1，并直接用实例化名"."点出来。

1.10、Vue访问网络

index.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <title>dome10title>
head>

<body>
    <div id="app-vue">
        fetch <button @click="getFetch()">使用get获取数据button>
        <button @click="postFetch()">使用post获取数据button><br>
        axios <button @click="getAxios()">获取get数据button> <button @click="postAxios()">获取post数据button>
    div>
    <script src="app.js">script>
body>

html>

注意:

使用axios必须添加cdn:

//

app.js

new Vue({
     
    el: "#app-vue",
    data() {
     
        return {
     
            todo: {
     
                title: "",
                completed: false
            }
        }
    },
    methods: {
     
        getFetch() {
     

            //使用fetch获取数据
            const l = fetch("https://api.ooopn.com/yan/api.php")
                .then((res) => {
     
                    return res.json(); //返回一个json数据
                })
                .then((res) => {
     
                    console.log(res); //获取json数据
                })
                .catch((e) => {
     
                    //请求失败
                    console.log("请求失败")
                })
        },
        postFetch() {
     
            //使用post访问
            fetch("http://jsonplaceholder.typicode.com/posts", {
     
                method: "POST",
                body: JSON.stringify(this.todo),
                headers: {
     
                    "Content-type": "application/json"
                }
            }).then((res) => {
     
                return res.json();
            }).then((res) => {
     
                console.log(res)
            }).catch((e) => {
     
                console.log("请求失败")
            })
        },
        // 使用axios
        getAxios() {
     
            axios.get("https://api.ooopn.com/yan/api.php")
                .then((res) => {
     
                    console.log(res.data);
                })
                .catch((e) => {
     
                    console.log("请求失败!")
                })
        },
        postAxios() {
     
            axios.post("http://jsonplaceholder.typicode.com/posts", this.todo)
                .then((res) => {
     
                    console.log(res.data);
                })
                .catch((e) => {
     
                    console.log("请求失败!")
                })
        }
    },

})

注意:

Fetch:

get:第一个then负责返回一个json数据，后面的then才是对象

post:在bodyl里添加json对象参数,headers负责指定类型，catch里请求失败的回调

axios:

get:无需那么复杂直接.get第一个then里返回的数据.data就是对象,catch请求失败的回调

post:无需那么复杂直接.post第二个参数就是json对象参数,然后then返回的数据.data就是对象了，catch请求失败的回调.

2、VUE脚手架

2.1、环境准备

下载nodejs：https://nodejs.org/en/
安装node.js后在cmd里使用命令下载VUE脚手架

检查node.js安装是否成功

node -v

npmm -v

在cmd里使用命令下载vue/cli 3一定要3

npm install -g @vue/cli

注意：如果下载较慢配置改错taobao镜像国内的就快了

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

检测:

vue --versoin

然后安装nmp下载插件加速插件

npm.taobao.org/网站里:

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测:

cnpm --version

2.2、创建VUE脚手架项目

2.2.1、命令创建

创建

vue create vuecli-demo（vuecli-demo是项目名)

选中：Manually select features(手动创建)

选中：Babel （按空格选择)

选中:In package.json(管理我们用的包)

输入:n不是模板名，使用自己的名字。

启动项目

进入项目

cd 项目名/

启动项目:

npm run serve

cli4去掉es代码规范

module.exports = {
     
  root: true,
  env: {
     
    node: true
  },
  extends: [
    'plugin:vue/essential',
    //'@vue/standard'
  ],
  parserOptions: {
     
    parser: 'babel-eslint'
  },
  rules: {
     
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

注意:

删掉’@vue/standard’即可。

2.1.2、图像化ui操作(vuecli版本得3)

进入ui图形化操作模式

vue ui

创建项目：点击项目–选择好路径创建即可。

第一次可以选择手动

选择Choose Vue versin、Babel、Router(其他的看需求)

去掉(Linter/Formatter)代码严谨

创建项目

运行项目：任务 serve运行即可。

安装插件：点击插件-----添加插件搜搜安装后配置即可—重写运行。

2.3、文件结构解析

README.md

全是命令行
# vuecli-demo01

## Project setup
```
npm install			//安装项目的依赖包
```

### Compiles and hot-reloads for development
```	
npm run serve		//启动项目并编译
```	

### Compiles and minifies for production
```
npm run build		//对项目打包
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

{
     
  "name": "vuecli-demo01",
  "version": "0.1.0",
  "private": true,
    //当前项目的启动方式:serve可以修改，但修改后npm run 修改后的值
  "scripts": {
     
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
    //项目依赖
  "dependencies": {
     
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
    //项目插件
  "devDependencies": {
     
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

package-lock.json

项目提供

babel.config.js

//对vue处理
module.exports = {
     
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

.gitignore

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

忽略文件，为了更好的提交重要文件。

public文件夹

favicon.icon

网站图标
index.html


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
  body>
html>

主页：

vue容器

node_modules

所有插件存放的地方。

注意:

收到别人项目，或发给别人项目，是没有node_modules文件的。

需要自己使用命令通过package.json提供参数下载回来:

cnpm install

sec文件夹

assets文件夹:静态文件,css,js…

components文件夹：包含的都是组件

<template>
    
  <div class="hello">
    <h1>{
        { msg }}h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentationa>.
    p>
    <h3>Installed CLI Pluginsh3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babela>li>
    ul>
    <h3>Essential Linksh3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docsa>li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Foruma>li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chata>li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twittera>li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">Newsa>li>
    ul>
    <h3>Ecosystemh3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-routera>li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuexa>li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtoolsa>li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loadera>li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vuea>li>
    ul>
  div>
template>

<script>
export default {
          
  name: 'HelloWorld',
  props: {
          
    msg: String
  }
}
script>



<style scoped>
h3 {
          
  margin: 40px 0 0;
}
ul {
          
  list-style-type: none;
  padding: 0;
}
li {
          
  display: inline-block;
  margin: 0 10px;
}
a {
          
  color: #42b983;
}
style>

App.vue:根组件

main.js:逻辑入口点

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
         
  render: h => h(App),
}).$mount('#app')

注意:

vue先入index其次进入main.js

.$mount(’#app’):最后放再#app容器中

2.4、组件嵌套的使用

2.4.1、全局组件(使用频率不高)

新建一个组件

注意:

遍历数组一定得加key值而且是唯一的。

在main文件使用

import Vue from 'vue'
import App from './App.vue'
// 注册全局组件
// 1.引入组件
import Users from './components/Users'
// 2.注册全局组件
Vue.component("users", Users)
Vue.config.productionTip = false

new Vue({
     
  render: h => h(App),
}).$mount('#app')

2.4.2、局部组件(使用频率高)

在App.vue界面引用

2.4.3、多个组件使用

Header.vue头部组件

Users.vue中

Footer.vue尾部

App.vue界面引用

2.5、vue脚手架样式问题

在style里写一个scoped标志值在当前页面使用，一般都这样使用。

如果不加可能会只要导入的都使用了。

2.6、数据绑定传输与修改

App.vue

注意：

App.vue中准备数据users,

引用组件时绑定数据

:users=“users”，users可以随便取赋值给的是值

Users.vue

注意：

传入的strnig 、number、boolean都是传入值。

传入的array、object都是引用的。

值：修改哪个值，哪个值会变。

引用：引用的是指针对象，修改一个全部都修改。

Footer.vue

{
    {title}}  
methods: {
btTitle(){
// 在这里如果要修改父容器的值，得注册事件修改
// this.title = "修改"//这样直接修改会报错
this.$emit("titleUpdata","通过注册事件修改后的值"); //这样修改父容器的值就不会错了。
}
},

添加修改title的事件


methods: {
updateTitle(title){
this.title = title;
}
},

使用注册的事件：titleUpdata

2.7、VUE的生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZBwMK61-1590412890570)(E:\Typora_text\images\vue1.png)]

export default {
  name: 'HelloWorld',
  data() {
      return {
          title:"Vue Componrnts Demo"
      }
  },
  // 测试生命周期
  beforeCreate() {
    alert("进入了beforeCreate了，data还没实例化。")
  },
  created() {
    alert("进入了creaed了，实例化了data了")
  },
  beforeMount() {
    alert("进入了beforeMount了，页面准备挂载还没显示")
  },
  mounted() {
    alert("进入了mounted了，页面已经显示了。")
  },
  beforeUpdate() {
    alert("进入了beforeUpdate了，页面准备刷新数据和页面。")
  },
  updated() {
    alert("进入了updated了，页面数据和页面刷新完毕。")
  },
  beforeDestroy() {
    alert("进入了beforeDestroy了，页面准备销毁")
  },
  destroyed() {
    alert("进入了destroyed了，页面销毁完毕。")
  },
}

2.8、父类传入元素：slot

App.vue



    {
    {title}}

注意:

内容可以指定slot，也可以不指定。

Header.vue

注意

slot可以理解占位，如果没有name,它会把父类引用里的全部显示。
slot的样式问题:无论在父类还是子类都能获取元素
slot的获取值问题:它只能获取父类的data里的值

2.9、动态组件(components)，缓存动态组件（keep-alive）

Framgent1.vue:第一个组件

Fragment2.vue:第二个组件

App.vue

注意:
components通过:is引入组件,但引入的组件有个缓存的问题。

如果你切换组件，输入框的内容降消失。

加上keep-alive后就是添加了缓存机制。

2.10、自定义vue脚手架模板

添加模板：

vue create 项目名

选中Manually select fatures

使用空格选中你需要的插件

选中需要的：我—ESLint + Standard config等等

选择 Lint on save保存刚的选择

选择In dedicated config files

选择y设置为模板，输入你的模板名

删除模板:
win在用户文件夹里找到.vuerc文件删除需要删除的即可，保存

2.11、添加插件

添加:

vue add 插件

选择默认，然后默认

2.12、给项目创建全局环境变量

启动模式得概念

你执行npm run serve时，对应的环境就是开发环境；

你执行npm run build时，对应的环境就是生产环境。

可以自定义其他模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhRM0yE1-1590412890572)(E:\Typora_text\images\vue2.png)]

设置启动模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-88XwoPal-1590412890573)(E:\Typora_text\images\vue3.png)]

.env

VUE_APP_URL=http://localhost:8080

这里我们使用开发环境

Test1.vue

注意:

添加新得env文件一定得重启vue

通过data实例化出url使用process.env.VUE_APP_URL获取env里得值。

引用url即可。

2.13、添加全局启动vue（可以单独启动一个vue页面)

首先添加全局启动插件

npm install -g @vue/cli-service-global

启动即可：

vue serve Test.vue（vue界面）

2.14、vue教手架得ui模式

进入ui图形化操作模式

vue ui

创建项目：点击项目–选择好路径创建即可。

运行项目：任务 serve运行即可。

安装插件：点击插件-----添加插件搜搜安装后配置即可—重写运行。

2.15、vue的基础配置

vue.config.js

module.exports = {
     
    "transpileDependencies": [
        "vuetify"
    ],
    //这个是4.0后写法
    publicPath: process.env.NODE_ENV === 'production' ?
    './' : '/', //访问目录
    outputDir: "dist2", //打包后输出得目录名:npm run build
    assetsDir: "assets", //静态资源目录（js,css,img,fonts)
    lintOnSave: false, //是否eslint保存检测，有效值：true||false||error
    // 网络配置
    devServer: {
     
        open: true, //在运行自动打开浏览器
        host: "localhost", //主机号
        port: 8081, //端口号
        https: false, //是否以https模式启动
        hotOnly: false, //热更新（启动）
        //跨域配置:暂时不报错：When `proxy` in package.json is an object, each `context` object must have a `target` property specified as a url string
        // proxy: {
     
        //   '/api': {
     
        //     target: 'http://www.baidu.com/',
        //     pathRewrite: {
     
        //       '^/api': ''
        //     },
        //     changeOrigin: true, // target是域名的话，需要这个参数，
        //     secure: false, // 设置支持https协议的代理
        //   },
        //   '/api2': {
     
        //     "api": "api"
        //   }
        // }
    }

3、实战项目（电商）

3.1、创建项目

选择预设
选择功能
- Babel
- Router
- Linter/Formatter
- 使用配置文件
配置路由
- 关闭历史路由，默认使用哈希路由
- 选择ESLint + Standard config文件格式
- 选择lint on save
添加插件
- vue-cli-plugin-element
- 修改插件配置：import Element:import on demand(按区导入)
添加依赖
- axios安装在运行依赖
- less安装在开发依赖–less-loader
去掉es代码规范:在.eslitrc.js文件中删除’@vue/standard’

3.2、初始化项目并存入Github

把项目做处理（删除没必要的文件与代码）。
初始化文件：git init
查看添加状态:git status
修改配置:
- git config --global user.name “账号”
- git config --global user.email “邮箱”
添加文件:git add .
提交文件:git commit -m “描述”
推送远程仓库：
- git remote add origin 仓库链接
- git push -u origin master

3.3、分支login，编写Login功能

3.3.1、在components创建一个Login文件并导入App.vue

3.3.2、加入到访问路由中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'

Vue.use(VueRouter)

const routes = [
  //访问
  {
     
    path: '/login',
    component: Login
  },
   //重置-/*dcv.binojpkl[]/\*
  {
     
    path: "/",
    redirect: "/login"
  }
]

const router = new VueRouter({
     
  routes
})

export default router

3.3.3、添加一个全局的css样式

在assets里创建一个css文件夹里放入全局css样式,
在main.js全局入口导入css:import ‘./assets/css/mainCss.css’

3.3.4、编写表单

组件网站:https://element.eleme.cn/#/zh-CN/component/installation
加入el组件,(plugins文件夹—element.js)

import Vue from 'vue'
import {
     
  Button
} from 'element-ui'
import {
     
  Form,
  FormItem
} from 'element-ui'
import {
     
  Input
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

写入表单

<template>
  <div class="login_mainDiv">
    <div class="login_center">
      
      <div class="login_topImg">
        <img src="../assets/logo.png" />
      div>
      
      <el-form class="login_form">
        
        <el-form-item label-width="0px">
          <el-input>el-input>
        el-form-item>
        
        <el-form-item label-width="0px">
          <el-input>el-input>
        el-form-item>
        
        <el-form-item class="loginBts">
          <el-button type="primary">登陆el-button>
          <el-button type="info">重置el-button>
        el-form-item>
      el-form>
    div>
  div>
template>

3.3.5、编写访问网络进行登陆

导入axios，并设置访问头

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局的Css
import './assets/css/mainCss.css'
// 导入配置axios
import axios from 'axios'
axios.defaults.baseURL = "https://v1.hitokoto.cn/" //给axios配置访问头
Vue.prototype.$http = axios //给vue的http配置访问头

Vue.config.productionTip = false

new Vue({
     
  router,
  render: h => h(App)
}).$mount('#app')

注意：

我们测试访问头设置头https://v1.hitokoto.cn/

导入组件

import Vue from 'vue'
import {
     
  Button
} from 'element-ui'
import {
     
  Form,
  FormItem
} from 'element-ui'
import {
     
  Input
} from 'element-ui'
// 导入el的弹窗
import {
     
  Message
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 全局挂载el的弹窗
Vue.prototype.$message = Message;

注意:

Vue.prototype. $m e s s a g e = M e s s a g e; 全局挂载，后可以使用 t h i s .$ message直接调用里的方法

login.vue

注意:

我们使用的是el-模式特别注意表单的结构。

使用$refs就可以获取表单了，然后调用表单里的方法。

本次测试const res = await this.$http.get("", this.loginForm);没有访问尾，只要访问通过就算登陆成功

3.3.6、登陆成功进行跳转

Login.vue

//登陆成功给seesionStorage里存入值以来验证是否登陆过
window.sessionStorage.setItem("isLogin", this.loginForm.user);
//并跳转页面
this.$router.push({ path: "/home" });

注意：

sessionStorage用来验证是否登陆，一般服务器给。

this.$router.push进行跳转

一定设置路由，一定把App.vue里设置视图

App.vue

注意:

在这里不能直接写组件，写上即可

之后使用路由来跳转。

router—index.js路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'

Vue.use(VueRouter)

const routes = [
  // 登陆
  {
     
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
     
      title: '登录页'
    },
  },
  {
     
    path: '/',
    redirect: "/login",
    component: Login,
    meta: {
     
      title: '登录页'
    },
  },
  // 主页
  // 登陆
  {
     
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
     
      title: '主页'
    },
  },
]

const router = new VueRouter({
     
  routes
})

export default router

注意:

这是vuecli4的写法

@是转换

3.3.7、登陆后的访问页面权限

router—index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'

Vue.use(VueRouter)

const routes = [
  // 登陆
  {
     
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
     
      title: '登录页'
    },
  },
  {
     
    path: '/',
    redirect: "/login",
    component: Login,
    meta: {
     
      title: '登录页'
    },
  },
  // 主页
  // 登陆
  {
     
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
     
      title: '主页'
    },
  },
]

const router = new VueRouter({
     
  routes
})
//路由权限跳转
router.beforeEach((to, from, next) => {
     
  //to 将要访问的路径
  //from 代表哪个路径访问来的，
  //next 是一个函数：next()放行，next("/xx")强制跳转
  if (to.path == "/login") {
     
    next(); //如果是登陆界面就放行
    return;
  }
  //获取sesstion里的值
  const sesstion = window.sessionStorage.getItem("isLogin");
  console.log(sesstion)
  if (sesstion == null) {
     
    next("/login"); //如果是空就强制跳转到login页
    alert("请登陆后重试!")
  } else
    next(); //否则直接放行

})
export default router

注意:

beforeEach方法是router专门做访问权限的。

to 将要访问的路径
from 代表哪个路径访问来的，
next 是一个函数：next()放行，next("/xx")强制跳转

拦截axios

axios.interceptors.request.use(config=>{
     
    //为请求头对象，添加token验证
    config.headers.Authorization = window.sessionStorage.getIntem("isLogin");
    return config;
})

注意:

在调用axios之前回调用interceptors.request.use。

在之前我们提交一个Authorization

写在main.js里

3.3.8、退出用户

Home.vue

注意:

window.sessionStorage.clear(); //清空sessionStorage
this.$router.push("/login"); //跳转访问

3.3.9、把完成号的login分支添加/提交/合并/上传

查看分支:git branch

查看提交状态:git status

添加: git add .

提交: git commit -m “提交描述”

切换回master主分支:git checkout master

合并: git merge login(分支名)

上传:git push(这个是第二次上传可以这样简写)

把login分支推送github:git push -u origin login(云端的分支名)

3.4、语法规则

3.4.1、规定引号

新建一个.prettierrc

{
     
    "semi":false,   //取消双引号
    "singleQuote":true  //使用单引号
}

注意：

如果又语法规则错误,在.eslintrc.js里的rules对象里添加保存的规则赋值为0取消规则

列:

{

‘xxxx’:0

}

3.5、主页编写

3.5.1、搭建主页框架

我们使用element-ui

自己在src里创建一个plugic文件夹里的element.js

最后的到main.js里导入文件夹。

导入组件

import Vue from 'vue'
import {
     
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
// 全局挂载el的弹窗
Vue.prototype.$message = Message;

Home.vue:使用上下，中左右框架

注意:

我们使用的element样式编写的架构。

justify-content样式使用:

flex-start 默认值。项目位于容器的开头。

flex-end 项目位于容器的结尾。

center 项目位于容器的中心。

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内。

initial 设置该属性为它的默认值。请参阅 initial。

inherit 从父元素继承该属性。请参阅 inherit。

flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

3.5.2、主页菜单项

添加组件element.js

import Vue from 'vue'
import {
     
  Button,
  Form,
  FormItem,
  Input,
  Message,
  Container,
  Header,
  Aside,
  Main,
  Menu,
  Submenu,
  MenuItem
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
// 全局挂载el的弹窗
Vue.prototype.$message = Message;

Home.vue

注意:

slot="title"时element里的样式，不加则看不到文字效果.

这里我们模拟自己数据。

我们拿数据进行for来渲染布局：这里只要注意使用对象的遍历。

el-menu特别属性

background-color:菜单项的背景

text-color：菜单项文字颜色

active-text-color:菜单项文件点击后的颜色

unique-opened:只能打开一个菜单项

collapse:是否收起，使用默认是false没有收起，ture收起

collapse-transition:是否开启折叠动画

3.5.3、插入刚进入的欢迎页

导入子路由:router—index.js

import welcome from '@/components/Welcome.vue'	 

{
     
    path: '/home',
    name: 'home',
    component: Home,
    meta: {
     
      title: '主页'
    },
    //home的子路由
    children: [{
     
      path: "/welcome",
      component: welcome
    }],
    redirect: "/welcome" //刚进入home发送/welcome
  },

在element里的main里写入路由占位符

3.5.4、开启菜单项的路由模式

在Home.vue里的el-menu里加上属性:router给ture
开启后每个菜单项的index里的值就是点击后访问的地址但要自己补全/


    //---------
    
        //------------
   {
          id: 0,
          authName: "用户管理",
          children: [{ id: "0-1", name: "用户列表", path: "/users" }],
          icon: "el-icon-user-solid"
        },

3.5.5、点击激活高亮菜单项

Home.vue


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

注意:

default-active:给的值就是激活高亮的菜单项

@click=“onMenu = chiItem.path”:点击后把onMenu赋值

3.5.6、编写表格来承载所有用户

在element.js中添加组件
User.vue

注意:

使用el的分栏
row里:gutter:是col之间的距离，
col里:span是栅格占据的列数,列

添加el表格
tbale的:data:是绑定数据对象，border添加边框线，stripe隔行变色
comlumn的是头标签,prop:是绑定data对象里的属性,如果设置

这里的slot-scope是获取当前对象的值scope.row就是值得对象

使用scope.row点出想要获取当前数据对象的属性

3.5.7、添加用户

导入组件
User.vue

   
    
      
      
        
          
        
        
          
        
        
          
        
        
          
        
      
      
      
        取 消
        确 定
        重置
      
    
//--------------------------
//在data()里添加，自定义校验数据
   // 自定义数据验证规则：邮箱
    var checkEmail = (rule, value, ch) => {
      // 正则验证邮箱
      const reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (reg.test(value)) {
        //合法邮箱
        return ch()
      }
      ch(new Error("请输入合法的邮箱!"))
    }
    // 自定义数据验证规则：手机
    var checkPhone = (rule, value, ch) => {
      // 正则验证手机
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
      if (reg.test(value)) {
        //合法手机
        return ch()
      }
      ch(new Error("请输入合法的手机!"))
    }
//准备数据
   addFormRules: {
        //添加数据对象，的检测数据
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          },
          { min: 3, max: 10, message: "用户名长度:3-10字符", trigger: "blur" }
        ],
        pwd: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur"
          },
          { min: 6, max: 15, message: "用户密码长度:6-15字符", trigger: "blur" }
        ],
        email: [
          {
            required: true,
            message: "请输入用户邮箱",
            trigger: "blur"
          },
          {
            validator: checkEmail,
            trigger: "blur"
          }
        ],
        // 调用自定义的数据校验:
        //validator指定校验的对象，trigger：焦点触发
        phone: [
          {
            required: true,
            message: "请输入用户手机",
            trigger: "blur"
          },
          {
            validator: checkPhone,
            trigger: "blur"
          }
        ]
      }
    }

注意:

点击添加的对话框!

dialog里title:提示标题,:visible.sync是否打开对话框,width:宽度

表单区

form里:model绑定数据,rules:数据检测对象,ref:添加后的对象传入ref

formItem里label:是输入框开头文字,prop:是传入rules对象的属性，@close:是关闭后的回调(这里不需要)

3.5.8、删除用户

导入全局的MessageBox

MessageBox
Vue.prototype.$confirm = MessageBox.confirm;

User.vue

    //删除用户方法
    deleteUser(data) {
      // 点击el的是否弹出框：type指定小图标的样式
      //返回值是promise可以使用.then来获取或asyns+await
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        // 点击确定的时候，如果发生错误，他会自动执行catch
        .then(() => {
          this.FUserList.splice(data.id, 1)
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        //点击取消
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    }

注意:

点击el的是否弹出框：type指定小图标的样式
返回值是promise可以使用.then来获取或asyns+await

点击确定的时候，如果发生错误，他会自动执行catch

3.5.9、权限列表

权限列表

添加路由

Rights.vue

    
    
      首页
      权限管理
      权限列表

注意:

操作差不多

3.5.10、分配权限

Roules.vue


    
      
      
      
      
        取 消
        确 定
      
    
//----
//分配权限
    getAllRole() {
      this.isRoles = true
    },
    alloRights() {
      this.isRoles = false
      let s = ""
      // getCheckedNodes是tree里的方法，获取选中节点的id
      for (let i = 0; i < this.$refs.treeRef.getCheckedNodes().length; i++) {
        s += this.$refs.treeRef.getCheckedNodes()[i].$treeNodeId + ","
      }
      this.$message.success(s)
    }

注意：

tree的使用

show-checkbox:是否可选择,data:数据，props显示的对象
treProps: { label: “name”, chidren: “chidren” },
default-expand-all:默认展开所有节点
node-key:指定每个节点的唯一id
default-expanded-keys:默认显示勾选节点，提供一个数组即可

获取选中节点的id

this.$refs.treeRef.getCheckedNodes()

3.5.11、商品分类

添加组件
Cate.vue

注意:

//导入插件：vue-table-with-tree-grid

import TreeTable from 'vue-table-with-tree-grid’

//注册：vue-table-with-tree-grid

Vue.component(“tree-table”, TreeTable)

表格：vue-table-with-tree-grid的插件:https://github.com/MisterTaki/vue-table-with-tree-grid
data:绑定数据,
columns:绑定列的数据,
selection-type:是否显示复选框
expand-type:是否位展开行,注意展开与分组是不一样的
show-index：是否显示数据索引,index-text:数据索引的名称
boder:是否显示竖向边框

级联选择器
options:数据源 ,
@change:选中发生变化得回调
Props：{
label指定选项标签为选项对象的某个属性值
value指定选项的值为选项对象的某个属性值
children指定选项的子选项为选项对象的某个属性值
expandTrigger：触发
}
clearable：是否支持清空
change-on-select:是否可以选中一级级联

…后面都是控件技术省略

4、项目的打包与优化。

4.1、打build包并运行项目

打包：可以在ui里运行build包，也可以运行命令:npm run build

操作后会导出一个dist文件（项目文件）

这就代表打包成功

运行:在dist文件同级目录创建一个app.js文件
//导入express
const express = require('express')
    const app = express()
    //托管的静态资源
    app.use(express.static('./dist'))
    app.listen(80, () => {
      
        console.log("服务器启动成功!:http://127.0.0.1")
    })
在该目录初始化node

npm init -y

安装express插件管理项目

npm i express -S

最后启动项目

node .\app.js

4.2、优化项目

4.2.1、打包后去掉console打印

插件名:transform-remove-console

在babeLconfig.js里可以判断是否打包运行然后加入插件

4.2.2、使用externals减少打包后文件大小

无论是element组件还是echart插件都可以使用导入.

具体百度

4.2.3、设置路由懒加载

懒加载：可以减少加载控件的压力，需要哪个控件就记载哪个。

1：安装开发依赖@babel/plugin-syntax-dynamic-import

2：babel.config.js中声明插件

3：将路由改为这种加载格式:

const Foo = () => import(/* webpackchunkName: “group-foo” */ ‘./Foo.vue’)
（Foot是名称，import里/里是分组/,‘里是组件’）

文档:参考链接:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

4.2.4、compressoin 减少传输文件的大小

app.js中导入插件:const compression = require(‘comression’) app.use(compression)

4.2.5、以https启动项目

申请SSL证书

----进入https://fressl.cn官网，选择域名与品牌
----输入自己的邮箱并选择相关选择
----验证dns(在域名管理后台添加TXT记录)
----验证通过后，下载SSL证书(full_chain.pem公钥;prvate.key私钥)

导入整数并启动https服务器

const https = require('https')
const fs = require('fs')
const options={
     cret:'fs.readFileSync('./full_chain.pem')',key:'fs.readFileSync('./private.key')'}

启动https服务器:443是默认端口

https.createServer(optoins,app).listen(443)

4.2.6、pm2托管项目

pm2:关闭运行终端依旧可以运行项目

----安装插件 npm i pm2 -g
----pm2 start 脚本(./app.js) --name 自定义启动项目名
----查看所有运行项目:pm2 ls
----重启项目:pm2 restart 自定义名称
----停止项目:pm2 stop 自定义名称
----删除项目:pm2 delete 自定义名称

5、特殊报错

5.1、启动

报错关键字:Module build failed (from ./node_modules/babel-loader/lib/index.js):
报错原因:插件更新了需要重写下载
解决:删除node_modules文件，运行npm i重写下载即可52

5.2、访问接口，跨域问题

代理解决


//const API_PROXY = 'https://bird.ioliu.cn/v1/?url='	//代理接口
 "https://bird.ioliu.cn/v1/?url=" +接口	//拼接即可

ns:数据源 ,
@change:选中发生变化得回调
Props：{
label指定选项标签为选项对象的某个属性值
value指定选项的值为选项对象的某个属性值
children指定选项的子选项为选项对象的某个属性值
expandTrigger：触发
}
clearable：是否支持清空
change-on-select:是否可以选中一级级联
–>
v-model=“catevalue”
:options=“cateData”
:props="{ expandTrigger: ‘hover’,label:‘name’,checkStrictly: true }"
@change=“cateChange”
clearable
>

取消
确定


> 注意:
>
> **//导入插件：vue-table-with-tree-grid**
>
> **import TreeTable from 'vue-table-with-tree-grid'**
>
> **//注册：vue-table-with-tree-grid**
>
> **Vue.component("tree-table", TreeTable)**
>
> 表格：vue-table-with-tree-grid的插件:https://github.com/MisterTaki/vue-table-with-tree-grid
> data:绑定数据,
> columns:绑定列的数据,
> selection-type:是否显示复选框
> expand-type:是否位展开行,注意展开与分组是不一样的
> show-index：是否显示数据索引,index-text:数据索引的名称
> boder:是否显示竖向边框
>
> 级联选择器
> options:数据源 ,
> @change:选中发生变化得回调
> Props：{
> label指定选项标签为选项对象的某个属性值
> value指定选项的值为选项对象的某个属性值
> children指定选项的子选项为选项对象的某个属性值
> expandTrigger：触发
> }
> clearable：是否支持清空
> change-on-select:是否可以选中一级级联

....后面都是控件技术省略

### 4、项目的打包与优化。

#### 4.1、打build包并运行项目

> 打包：可以在ui里运行build包，也可以运行命令:npm run build
>
> 操作后会导出一个dist文件（项目文件）
>
> 这就代表打包成功
>
> 运行:在dist文件同级目录创建一个app.js文件
>
> ```java
> //导入express
> const express = require('express')
>     const app = express()
>     //托管的静态资源
>     app.use(express.static('./dist'))
>     app.listen(80, () => {
>         console.log("服务器启动成功!:http://127.0.0.1")
>     })
> ```
>
> 在该目录初始化node
>
> npm init -y
>
> 安装express插件管理项目
>
> npm i express -S
>
> 最后启动项目
>
> node .\app.js

#### 4.2、优化项目

##### 4.2.1、打包后去掉console打印

> 插件名:transform-remove-console	
>
> 在babeLconfig.js里可以判断是否打包运行然后加入插件

##### 4.2.2、使用externals减少打包后文件大小

> 无论是element组件还是echart插件都可以使用导入.
>
> 具体百度

##### 4.2.3、设置路由懒加载

> 懒加载：可以减少加载控件的压力，需要哪个控件就记载哪个。
>
> 1：安装开发依赖@babel/plugin-syntax-dynamic-import
>
> 2：babel.config.js中声明插件
>
> 3：将路由改为这种加载格式: 
>
> const Foo = () => import(/* webpackchunkName: "group-foo" */ './Foo.vue')
> 	（Foot是名称，import里/*里是分组*/,'里是组件'）
>
> 文档:参考链接:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

##### 4.2.4、compressoin 减少传输文件的大小

> app.js中导入插件:const compression = require('comression') app.use(compression)

##### 4.2.5、以https启动项目

+ 申请SSL证书

> 		----进入https://fressl.cn官网，选择域名与品牌
> 		----输入自己的邮箱并选择相关选择
> 		----验证dns(在域名管理后台添加TXT记录)
> 		----验证通过后，下载SSL证书(full_chain.pem公钥;prvate.key私钥)

+ 导入整数并启动https服务器

```js
const https = require('https')
const fs = require('fs')
const options={cret:'fs.readFileSync('./full_chain.pem')',key:'fs.readFileSync('./private.key')'}

启动https服务器:443是默认端口

https.createServer(optoins,app).listen(443)

4.2.6、pm2托管项目

pm2:关闭运行终端依旧可以运行项目

----安装插件 npm i pm2 -g
----pm2 start 脚本(./app.js) --name 自定义启动项目名
----查看所有运行项目:pm2 ls
----重启项目:pm2 restart 自定义名称
----停止项目:pm2 stop 自定义名称
----删除项目:pm2 delete 自定义名称

5、特殊报错

5.1、启动

报错关键字:Module build failed (from ./node_modules/babel-loader/lib/index.js):
报错原因:插件更新了需要重写下载
解决:删除node_modules文件，运行npm i重写下载即可52

5.2、访问接口，跨域问题

代理解决


//const API_PROXY = 'https://bird.ioliu.cn/v1/?url='	//代理接口
 "https://bird.ioliu.cn/v1/?url=" +接口	//拼接即可

你可能感兴趣的:(vue学习笔记,前端新技术,vue.js,css,html5,node.js)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
更改npm镜像源为淘宝镜像骆小骆基于node.js
npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀 kkai人工智能 chatgpt 人工智能学习媒体 ai
最近这段时间，AI热潮因ChatGPT的火爆再次掀起。如今，网上大部分内容都在调侃AI，但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者，第一次和ChatGPT深度交流后，我就确信：ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后，我越发感受到它的颠覆性。因此，我想从工作和学习的角度，分享它的优势及我的一些使用技巧，而非娱
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
俞军关于企业本质的读书思考小廖BOY
本文内容来自于俞军老师的聊天记录关于企业本质的一点思考总体上，企业的本质，只在于两点：1.发现市场获利机会。2.生产效率高于市场。一、发现市场获利机会发现市场获利机会的路径有三种：洞察，其实是利用信息不对称获利。你知道哪里能买到便宜生产要素，你知道哪些用户更想要什么，你精通一种有用的新技术新方法新渠道，你知道什么约束条件将会变化，而别人不知道，这里就都有市场获利机会。试错，其实是因为信息不完全原理
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？换个号韩国红果果 html 小球碰撞
稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
《高性能HTML5》读后整理的Web性能优化内容白糖_ html5
读后感先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。
[JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop 商城系统 jshop 电商系统
在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。在jshop中，对RequestContextHolder的
算法之时间复杂度周凡杨 java 算法时间复杂度效率
在计算机科学中，算法的时间复杂度是一个函数，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是渐近的，它考察当输入值大小趋近无穷时的情况。这样用大写O()来体现算法时间复杂度的记法，
Java事务处理 g21121 java
一、什么是Java事务通常的观念认为，事务仅与数据库相关。事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
Linux awk命令详解 510888780 linux
一. AWK 说明 awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。 awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
android permission 布衣凌宇 Permission
<uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na
Oracle和谷歌Java Android官司将推迟 aijuans java oracle
北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
linux shell 常用命令 antlove linux shell command
grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:
Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术 Java解析xml文档 dom技术 XML配置数据库连接
XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习 XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML: DOM解析XML文件 SA
underscore.js 学习（二） bijian1013 JavaScript underscore
Array Functions 所有数组函数对参数对象一样适用。1.first _.first(array, [n]) 别名: head, take 返回array的第一个元素，设置了参数n，就
plSql介绍 bijian1013 oracle 数据库 plsql
/* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select
【Nginx一】Nginx安装与总体介绍 bit1129 nginx
启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件
spring mvc开发中浏览器兼容的奇怪问题 bitray jquery Ajax springMVC 浏览器上传文件
最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件. 在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
Lua的io库函数列表 ronin47 lua io
1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
java-26-左旋转字符串 bylijinnan java
public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu
《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。 1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别
[轨道与计算]新的并行计算架构 comsci 并行计算
我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？
重复执行某段代码 dai_lm android
用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h
Java实现堆栈（list实现） datageek 数据结构——堆栈
public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty
四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DB backup
一：通过备份王等软件进行备份前台进不去？用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。解决方法：学会修改网站配置文件，大多是由co
github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com github git webhook
转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！工具/原料 github 方法/步骤
">的作用" target="_blank">JSP中的作用蕃薯耀
JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
linux下SAMBA服务安装与配置 hanqunfeng linux
局域网使用的文件共享服务。一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients
guava cache IXHONG cache
缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScript jquery css
这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码： (
美国人的福利和中国人的储蓄 nannan408
今天看了篇文章，震动很大，说的是美国的福利。美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina
C语言算法之打渔晒网问题 qiufeihu c 算法
如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。代码如下： #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0
XML中DOCTYPE字段的解析 wyzuomumu xml
DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL. 私有DTD <!DOCTYPErootSYST

入门Vue.js基础学习笔记记录，遇坑!

Vue.js基础学习笔记

我的主页:http://106.13.185.176:8889/#/home

1.起步

1.1、文档

1.2、v-bind实例化变量传递

{ { name }}

1.3、v-on事件绑定

1.4、v-model双向数据绑定

1.5、computed属性数据方法

1.6、动态改变样式技巧

1.7、v-for,v-show判断是否显示标签控件

1.8、v-for遍历值显示标签

1.9、Vue里的全局机制(component)

1.10、Vue访问网络

2、VUE脚手架

2.1、环境准备

2.2、创建VUE脚手架项目

2.2.1、命令创建

2.1.2、图像化ui操作(vuecli版本得3)

2.3、文件结构解析

2.4、组件嵌套的使用

2.4.1、全局组件(使用频率不高)

{ { msg }}

2.4.2、局部组件(使用频率高)

2.4.3、多个组件使用

{ {title}}

{ { msg }}

{ {footer}}

2.5、vue脚手架样式问题

{ { msg }}

2.6、数据绑定传输与修改

{ { msg }}

{ {title}}

2.7、VUE的生命周期

2.8、父类传入元素：slot

{ {title}}

2.9、动态组件(components)，缓存动态组件（keep-alive）

2.10、自定义vue脚手架模板

2.11、添加插件

2.12、给项目创建全局环境变量

2.13、添加全局启动vue（可以单独启动一个vue页面)

2.14、vue教手架得ui模式

2.15、vue的基础配置

3、实战项目（电商）

3.1、创建项目

3.2、初始化项目并存入Github

3.3、分支login，编写Login功能

3.3.1、在components创建一个Login文件并导入App.vue

3.3.2、加入到访问路由中

3.3.3、添加一个全局的css样式

3.3.4、编写表单

3.3.5、编写访问网络进行登陆

3.3.6、登陆成功进行跳转

3.3.7、登陆后的访问页面权限

3.3.8、退出用户

3.3.9、把完成号的login分支添加/提交/合并/上传

3.4、语法规则

3.4.1、规定引号

3.5、主页编写

3.5.1、搭建主页框架

3.5.2、主页菜单项

3.5.3、插入刚进入的欢迎页

3.5.4、开启菜单项的路由模式

3.5.5、点击激活高亮菜单项

3.5.6、编写表格来承载所有用户

3.5.7、添加用户

3.5.8、删除用户

3.5.9、权限列表

3.5.10、分配权限

3.5.11、商品分类

4、项目的打包与优化。

4.1、打build包并运行项目

4.2、优化项目

4.2.1、打包后去掉console打印

4.2.2、使用externals减少打包后文件大小

4.2.3、设置路由懒加载

4.2.4、compressoin 减少传输文件的大小

4.2.5、以https启动项目

4.2.6、pm2托管项目