Vue项目开发介绍

GG_Bonin

已于 2022-11-01 21:59:14 修改

阅读量1.5k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-10-31 20:14:53 首次发布

本文链接：https://blog.csdn.net/weixin_52596593/article/details/127618561

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue项目目录介绍

$\bullet$ node_modules：内部有很多当前项目依赖的模块

$\bullet$ public：存放页面图标和不支持 JavaScript 情况时的页面

$\circ$ favicon.ico：网站小图标

$\circ$ index.html：spa单页面应用

$\bullet$ src：存放 vue 项目的源代码

$\circ$ assets：静态资源，js、css，图片

$\circ$ components：小组件，用在别的页面大组件中

$\circ$ HelloWorld.vue：默认了一个hello world组件

$\circ$ router：装了vue-router自动生成的，如果不装就没有

                - index.js：vue-router的配置

$\circ$ store：装了vuex自动生成的，如果不装就没有

                - index.js ：vuex的配置

$\circ$ views：放了一堆组件，页面组件

- AboutView.vue：关于页面组件

- HomeView.vue：主页页面组件

         $\circ$ App.vue：根组件

         $\circ$ main.js：整个项目启动入口

$\bullet$ .gitignore：git的忽略文件

$\bullet$ babel.config.js：babel的配置文件

$\bullet$ package.json：存放项目的依赖配置(比如vuex，element-UI)

$\bullet$ package-lock.json：锁定文件package.json中写了依赖的版本，这个文件锁定所有版本

$\bullet$ README.md：项目的介绍文件

$\bullet$ vue.config.js：vue项目的配置文件

Vue项目开发规范

<template>html内容写在里面</template>
<script>写js内容</script>
<style>写css样式<style>
1.把App.vue根组件导入

2.使用new Vue({render: h => h(App)}).$mount('#app') 把App.vue组件中得数据和模板，插入到了index.html的id为app div中了

3.以后，只要在每个组件的export default{}写之前学过的所有js的东西

4.以后，只要在每个组件的template，写模版，插值语法，指定等

5.以后，只要在每个组件等style，写样式

es6导入导出语法

$\bullet$ 默认导出与导入

- 默认导出：关键字export defalut
export defalut {
    name:'abc',
    printName () {
        console.log(this.name)
    }
}
- 命名导入：要起一个名字
import 命名 from '路径'
$\bullet$ 命名导出与导入

- 写一个js，在js中定义变量，函数，最后使用export导出
export conse name = 'abc'
export const printname = () => {
    console.log('cba')
}
- 在想使用的js中导入
import {printname} from '路径'
ps：可以在包下面建立index.js的文件，以后导入的时候就会默认找它，类似python中的__init__.py。

Vue项目集成axios

$\bullet$ 第一步：安装axios

cnpm install axios --S

$\bullet$ 第二步：导入使用

import axios from 'axios'

$\bullet$ 第三步：利用axios向后端获取数据

axios.get('http://127.0.0.1:800/user/').then(res => {
    console.log(res.data)
    this.userList=res.data
})

$\bullet$ 第四步：需要解决跨域问题(django)

- 安装：pip3 install django-cors-headers

- app中注册：

INSTALLED_APPS = (
     'corsheaders',
)

- 中间件注册：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

- 在配置文件中加下面代码：

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',
        )

props配置项

props的作用是用来接收父组件中传过来的数据

子组件使用props配置项进行属性的接收的形式有三种：
// 1.普通用法只接收数据
props:['name']

// 2.接受数据的属性认证
props:{
    name:String
}

// 3.限制类型、必要性、指定默认值
props:{
    name:{
        type:String, // 类型
        required:true, // 必要性
        default:'隔壁老王', // 默认值
    }
}

混入与插件、scoped样式

$\bullet$ 混入用法

混入提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项，当组件使用混入对象时所有混入对象的选项将被混合进入该组件本身的选项
// 定义一个混入
export const hunru = {
    data() {
    return {
        name:'abc'
    }
},
    methods:{
        handlePrintName() {
            alert(this.name)
        }
    },
}
- 在局部组件中使用
import {hunru} from "@/mixin";
mixins:[hunru,]
- 全局使用，在main.js中导入以后所有组件都可以用
import {hunru} from "@/mixin";
Vue.mixin(hunru)
$\bullet$ 插件的使用

插件通常用来Vue添加全局功能，用来增强Vue。插件的本质包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
import Vue from "vue";
    import axios from "axios";
    import {hunru} from '@/mixin'
    export default {
        install(miVue) {
            // console.log(miVue)
            // 1 vue 实例上放个变量
            Vue.prototype.$name = 'abc'  // 类比python，在类上放了一个属性，所有对象都能取到
            Vue.prototype.$ajax = axios

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


            // 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;
                },
            });

        }
    }
- 在main.js中使用插件，以后在组件中可以直接用插件中写的东西
import plugins from '@/plugins'
Vue.use(plugins) // 本质：使用use会自动触发插件对象中得install
$\bullet$ scoped样式

scoped可以达到类组件私有化，在styple上写以后只针对与当前组件生效
<style scoped> </style>

localStorage和sessionStorage

当我们需要在浏览器中存储数据的时候就需要用到localStorage、sessionStorage和cookie三种形式存储每一种方式的功能都不一样

$\bullet$ localStorage：永久存储，浏览器关闭也依然存在

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">点我向localStorage放数据</button>
    <button @click="getStorage">点我获取localStorage数据</button>
    <button @click="removeStorage">点我删除localStorage放数据</button>
<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {
        cook: 100,
        msg: '完美'
      }
      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>

$\bullet$ sessionStorage：临时存储，关闭页面数据就没有了

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

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveSessionStorage() {
      var person = {
        name: 'abc',
        age: 18
      }
    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>

$\bullet$ cookie：设置时间，到期就过期

<template>
  <div id="app">
    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向localStorage放数据</button>
    <button @click="getCookie">点我获取localStorage数据</button>
    <button @click="removeCookie">点我删除localStorage放数据</button>
  </div>
</template>
<script>
import cookies from 'vue-cookies'

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

      cookies.remove('name')
    }
</script>

集成elementui

$\bullet$ 常用的第三方样式库

- iview

- 移动端Ui：vant

- 饿了么团队：elementui

$\bullet$ elementui使用步骤

- 安装：npm i element-ui -S

- 引入样式

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
- 通过npm安装的则需要在main.js中写上下面代码
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

GG_Bonin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue项目开发介绍

内部有很多当前项目依赖的模块存放页面图标和不支持 JavaScript 情况时的页面网站小图标spa单页面应用存放 vue 项目的源代码静态资源，js、css，图片小组件，用在别的页面大组件中默认了一个hello world组件装了vue-router自动生成的，如果不装就没有vue-router的配置装了vuex自动生成的，如果不装就没有vuex的配置放了一堆组件，页面组件关于页面组件主页页面组件根组件整个项目启动入口git的忽略文件babel的配置文件。
复制链接

扫一扫

专栏目录