vue项目创建

标签：vue name 项目创建 js msg 组件 import

Vue项目

创建vue项目

在确认的路径下输入命令

vue create myfirstvue

ide的选择

vscode，webstorm:jetbrains公司的，跟pycharm一家的，使用习惯一样

选择使用pycharm+vue插件开发vue项目

使用pycharm打开vue项目

运行vue项目

1.在命令行中敲：npm run serve

2.在pycharm中点击绿色箭头运行

vue项目目录介绍

myfirstvue                    #项目名字
    node_modules              # 文件夹，内部有很多当前项目依赖的模块，可以删除，npm install
    
    public                    #文件夹
        -favicon.ico           # 网站小图标
        -index.html            # spa：单页面应用  
        
    src                       #以后咱们写代码，都在这下面
    	-assets                # 静态资源，js，css，图片  类似于static文件夹
    		logo.png          # 静态资源的图片
    	-components           # 组件：小组件，用在别的大(页面组件)组件中
    		-HelloWorld.vue   # 默认了一个hello world组件
    	-router                    # 装了vue-router自动生成的，如果不装就没有
    		index.js              # vue-router的配置
    	-store                # 装了vuex自动生成的，如果不装就没有
    		index.js          # vuex的配置
    	-views                # 放了一堆组件，页面组件
            AboutView.vue     # 关于 页面组件
            HomeView.vue      # 主页  页面组件
    	-App.vue              # 根组件
    	-main.js              # 整个项目启动入口
        
    .gitignore                #git的忽略文件
    babel.config.js           #babel的配置
    jsconfig.json
    package.json              # 重要：类似于python项目的requirements.txt  当前项目所有依赖
    package-lock.json         #锁定文件：package.json中写了依赖的版本，这个文件锁定所有版本
    README.md                 # 读我，项目的介绍
    vue.config.js             # vue项目的配置文件

es6的导入导出语法

前提：如果要导入，必须先导出

es6的导出语法有两种，分别是默认导出和命名导出

默认导出和导入

首先写一个js，在js中定义变量，函数，最后使用export defalut 导出

 export default {
        name: '彭于晏',
        printName () {
            console.log(this.name)
        }
    }

在想使用的js中，导入模块
```
  import 随便起 from './lqz/utils'
```

命名导出和导入

首先写一个js ,在js中定义变量，函数，最后使用export 导出

export const name = '刘亦菲'
export const printName = () => {
    console.log('实打实')
}

在想使用的js中，导入模块
```
import {printName} from './lqz/utils'
```

在包下可以建立一个名为index.js 的文件，以后导入的时候，会默认找它，相当于python中的__ init__

vue项目开发规范

写的组件，都是单页面组件

使用 xx.vue 以后写一个组件就是一个xx.vue,页面组件和小组件

一个组件就是一个xx.vue，内部都有三部分

<template></template>  # html内容写在里面
<script></script>      # 写js内容
<style></style>        # 写css样式

main.js 是整个入口

把App.vue根组件导入了，
使用new Vue({render: h => h(App)}).$mount('#app')

把App.vue组件中得数据和模板，插入到了index.html的id为app的 div中了
以后，只要在每个组件的export default {} 写之前学过的所有js的东西
以后，只要在每个组件的template，写模板，插值语法，指令。。
以后，只要在每个组件的style，写样式

vue项目集成axios,vue项目前后端结合

安装axios

输入命令指示符：npm install axios --S

导入使用

import axios from 'axios'

发送请求，获取数据

axios.get('http://127.0.0.1:8000/books/').then(res => {
    console.log(res.data)
    this.bookList=res.data
})

解决跨域（django 项目）

下载第三方模块

pip3 install django-cors-headers

配置文件

1.在app上注册
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)
2.中间件注册
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

3.配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

前后端交互版登录功能

<template>
  <div id="app">

    <h1>登录功能</h1>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <button @click="handleSubmit">登录</button>{{msg}}

  </div>
</template>


<script>


import axios from 'axios'

export default {

  name: 'App',
  data() {
    return {
      bookList: [],
      username: '',
      password: '',
      msg:''
    }
  },
  methods: {
    handleSubmit() {
      axios.post('http://127.0.0.1:8000/user/', {
        username: this.username,
        password: this.password
      }).then(res => {
        console.log(res.data)
        if(res.data.code==100){
          // 登录成功 跳转到百度
          location.href='http://www.baidu.com'
        }else {
          this.msg=res.data.msg
        }
      })
    }
  },
</script>

后端

def login(request):
    username = json.loads(request.body).get('username')
    password = json.loads(request.body).get('password')
    if username=='jcs' and password = '123':
        return JsonResponse({'code':100, 'msg':'登录成功'})
    else:
         return JsonResponse({'code':101, 'msg':'用户名或密码错误'})

配置文件更改为上述即可

props配置项

接受父传子自定义的属性

数组写法
对象写法
对象套对象写法

1.父组件
<template>
  <div id="app">
    <h1>App</h1>

    <!--    <Child msg="父亲给你的"></Child>-->
<!--    <Child :msg="true"></Child>-->
    <Child></Child>
  </div>
</template>


<script>

// import Child from "@/components/Child";   // @ 代指 src路径
import Child from "./components/Child";

export default {
  name: 'App',
  components: {
    Child
  }

}
</script>

<style>
h1 {
  background-color: aqua;
}
</style>

2.子组件

<template>
  <div>
    <button>后退</button>
    {{ title }}---{{ msg }}
    <button>前进</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  // 普通使用
  // props: ['msg'],
  //属性验证
  // props: {msg: String},
  // 指定类型，必填和默认值
  props: {
    msg: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  },

  data() {
    return {
      title: '首页'
    }
  },
  created() {
    console.log(typeof this.msg)
  }


}
</script>

<style scoped>

</style>

写法总结

1.普通使用

props: ['msg']

2.属性验证

props: {msg: String},

3.指定类型，必填和默认值

 props: {
    msg: {
      type: String, //类型
      required: true, //必要性
      default: '老王' //默认值
    }
  },

混入

mixin(混入) 可以把多个组件共用的配置提取成一个混入对象

把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用

使用步骤

1.写个mixin/index.js

export const hunhe = {
    data() {
        return {
            name: '彭于晏'
        }
    },
    methods: {
        handlePrintName() {
            alert(this.name)
        }
    },
}

2.局部导入：在组件中

import {hunhe} from "@/mixin";
mixins:[hunhe,]

3.全局使用

在main.js 中以后所有组件都可以用

import {hunhe} from "@/mixin";
Vue.mixin(hunhe)

插件

功能

用于增强Vue

本质

包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

使用步骤

1.写一个 plugins/index.js

import Vue from "vue";
import axios from "axios";
import {hunhe} from '@/mixin'
export default {
    install(miVue) {
        // console.log(miVue)
        // 1 vue 实例上放个变量
        // Vue.prototype.$name = 'lqz'  // 类比python，在类上放了一个属性，所有对象都能取到
        // Vue.prototype.$ajax = axios

        // 2 使用插件，加入混入
        // 全局使用混入
        // Vue.mixin(hunhe)


        // 3 定义全局组件
        // 4 定义自定义指令  v-lqz
        Vue.directive("fbind", {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            },
        });

    }
}

2.在main.js 中使用插件

import plugins from '@/plugins'
	Vue.use(plugins)  // 本子，使用use，会自动触发插件对象中得install

3.以后再组件中可以直接用插件中写的东西

scoped样式

在styple上写，以后只针对于当前组件生效

类似于局部控制

localStorage和sessionStorage

在浏览器中存储数据

1.永久存储：localStorage 不登录加购物车，没登录搜索过的商品

2.关闭页面数据就没了(临时存储)：sessionStorage

3.设定一个时间，到时候就过期：cookie

localStorage

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">点我向localStorage放数据</button>
    <button @click="getStorage">点我获取localStorage数据</button>
    <button @click="removeStorage">点我删除localStorage放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      localStorage.setItem('userinfo', JSON.stringify(person))
    },
    getStorage() {
      let userinfo = localStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeStorage() {
      // localStorage.clear()
      localStorage.removeItem('userinfo')
    },

}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

sessionStorage

<template>
  <div id="app">

    <h1>sessionStorage操作</h1>
    <button @click="saveSessionStorage">点我向sessionStorage放数据</button>
    <button @click="getSessionStorage">点我获取sessionStorage数据</button>
    <button @click="removeSessionStorage">点我删除sessionStorage放数据</button>

  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {

    saveSessionStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      sessionStorage.setItem('userinfo', JSON.stringify(person))
    },
    getSessionStorage() {
      let userinfo = sessionStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeSessionStorage() {
      // localStorage.clear()
      sessionStorage.removeItem('userinfo')
    },
}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

<template>
  <div id="app">

    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向cookie放数据</button>
    <button @click="getCookie">点我获取cookie数据</button>
    <button @click="removeCookie">点我删除cookie放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveCookie() {
      cookies.set('name','lqz','7d')  // 按秒计
    },
    getCookie() {
      console.log(cookies.get('name'))
    },
    removeCookie() {

      cookies.remove('name')
    }
  }

}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

补充：序列化和反序列化

序列化反序列化	实现
对象转json字符串	JSON.stringify(person)
json字符串转对象	JSON.parse()

集成elementui

1 使用第三方插件

https://github.com/vuejs/awesome-vue#components--libraries

集合了来自社区贡献的数以千计的插件和库。

2 使用第三方UI框架

饿了么UED团队推出的vue 前端框架：

PC框架：

(element UI ， iview)

element UI 官网：http://element.eleme.io/

element UI github：https://github.com/ElemeFE/element

移动端框架：

(mint UI)

mint UI官网：https://mint-ui.github.io/docs/

mint UI github：https://github.com/ElemeFE/mint-ui

使用步骤

1.安装 npm i element-ui -S

2.在main.js中引入

标签：vue,name,项目,创建,js,msg,组件,import
From： https://www.cnblogs.com/nirvana001/p/16845488.html

vue项目创建

Vue项目