Vue配置

css篇

• height: calc(100% - 45px);

  页面百分比的高度

vue2配置

• npm install -g vue-cli

  安装最新版本2.0vue

• vue init webpack my-project

• 新建项目

vue3配置

• npm uninstall vue-cli -g

  卸载旧版本vue

• npm install -g @vue/cli

  更新最新版本vue

eslint

• // eslint-disable-next-line

  忽略下一行

• /* eslint-disable no-alert, no-console */

  禁用指定规则

• /* eslint-disable */

  忽略文件中的所有警告。

vue3跨域

根目录下新建vue.config.js

module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域
      '/api': {
        target: 'http://www.thenewstep.cn/', //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }

    }
  }
}

git小乌龟配置

• https://www.jianshu.com/p/33108325fc87

VsCode配置

• Chinese (Simplified) Language Pack for Visual Studio Code

  中文安装包

• ESLint

  代码格式化

• Vetur

  vue代码高亮

• Auto Rename Tag

  自动修改闭合标签

• Path Intellisense

  自动提示补全路径

• Bracket Pair Colorizer

  让代码的各种括号呈现不同的颜色

前端UI框架

• Pc

  iView

  Element

  Ant Design

• 移动端

  Vant

  mint

官方api

https://www.juhe.cn/servicehttps://meyerweb.com/eric/tools/css/reset/

vue小案例

• 点击追加选中样式

<ul>
    <li class="liMenu" 
        :class="menuData.index==index ? 'active' : ''"
        @click="isSelected(item,index)"
        v-for="(item,index) in menuData.title" 
        :key="index"
    >
        {{item}}
    </li>
</ul>

data() {
    return {
      menuData: {
        title: ['标题1','标题2'],
        index: 0
      }
    }
},

isSelected(item,index){
    this.menuData.index = index
},

node案例

• npm install -g nodemon
• npm install

  安装

• nodemon

  启动

• 看到mongodb connect 和 端口号 就表示启动起来了