Vue项目零碎知识（全局js,css配置，element-UI,bs使用， img动态配置，js数组）

1. 全局css样式，首先在静态assets中写好文件，然后要在main.js中配置

   // 配置全局css样式
   // import '@/assets/css/global.css'
   require('@/assets/css/global.css')
   
   //上面两种都可以实现全局样式的导入，但是第二种容错率较好，更健壮，比较常用，第一种对环境要求比较高

2. 全局js样式，也是首先要在静态assets文件中写好，然后再main.js中进行配置

   // main.js
   
   //配置全局settings.js
   import settings from '@/assets/js/settings'
   Vue.prototype.$settings = settings;
   //注意，这个$settings是可以随便起名的,可以写成Vue.prototype.a，但是在下面用的时候也需要写成this.a.base_url
   
   // home.vue
   export default {
       name: 'home',
       components: {
   
       },
       created(){
           console.log(this.$settings.base_url);
       }
   }

3. css样式中，font，里面严格按照F12中的样式顺序来，不写的话就是默认normal

1. 主页点击之后跳转的一个流程：点击按钮，找到router路由，然后加载component组件，进入views组件中，该组件再由相关的子组件渲染数据，通过属性把值传过去，这样就实现了页面的展现。
2. 仓库存储： store，一刷新就没有了，在移动端的应用比较多。
3. vue辅助UI—element UI（属于组件，可以直接进行使用）

   ## main.js
   
   #配置全局element-ui组件
   #1、安装：cnpm install element-ui
   #2、配置环境
   
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI); #全局就可以用了
   

4. VUE使用bootstrap，需要对其进行二次封装，因为它不是组件，Vue只支持使用组件

   ## main.js
   
   ## 配置jq+bs环境
   ## 1、安装：cnpm install jquery && cnpm install [email protected]
   ## 2、配置环境：jq在vue.config.js中配置
   import "bootstrap"   # 加载bs的逻辑
   import "bootstrap/dist/css/bootstrap.css"   
   
   #手动新建一个vue.config.js文件
   
   # 修改该文件内容后，只有重启，才能同步配置
   const webpack = require("webpack");
   
   module.exports = {
       configureWebpack: {
           plugins: [
               new webpack.ProvidePlugin({
                   $: "jquery",
                   jQuery: "jquery",
                   "window.$": "jquery",
                   "window.jQuery": "jquery",
                   Popper: ["popper.js", "default"]
               })
           ]
       }
   };

5. JsonResponse

   # 如果传的是字典，那么可以直接传，否则要加参数 safe=false, 如果数据中有中文，就加参数json_dumps_params{'ensure_ascii': False}  这个参数其实就是json.dump()点进去看源码就可以看到的。

6. 动态加载img 中src

   Vue中src属性绑定问题

   vue关于img src动态赋值问题

7. 关于media 静态文件的配置

   '''
   用户上传的文件，应该单独放在一个文件夹中，所以django后端在用户注册或者保存文件的时候，会自动生成一个文件夹 media,在使用图片的路径时，会自动把media拼接进去。
   '''
   
   '''
   我是直接在数据库中增加数据，配置图片路径，但是传给前台的图片路径仍然带着media, 所以为了防止图片找不到，需要手动加一个media文件夹。
   '''
   
   '''
   在使用media的时候需要注意配置
   '''
   # settings.py
   MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
   
   #urls.py
   from django.views.static import serve
   from app名 import settings
   
   url(r'^media/(?P<path>.*)', serve, {'document_root':settings.MEDIA_ROOT})

8. js中对于数组的操作

   # splice
   let arr = [1, 2, 3];
   arr.splice(1,1,100) #打印结果 arr=[1, 100, 3] 从第一个位置开始，操作长度为1，操作结果为100，相当于替换
   arr.splice(3, 1, 100) #打印结果 arr=[1, 2, 3, 100] 第三个位置，操作长度为1，操作结果为100，相当于尾增
   arr.splice(0, 0, 100) #打印结果 arr=[100, 1, 2, 3] 相当于首增
   arr.splice(0, 1) #打印结果 arr=[2, 3]相当于删除第一个
   

原文地址：https://www.cnblogs.com/michealjy/p/11877164.html