Vue2-基础

1.第一个项目

  1.1 下载node.js

 最新版 http://nodejs.cn/

  1.2.安装node.js

  npm默认版本为： 6.1.0  使用npm install npm -g更新npm至最新版

  1.3.配置淘宝

    1) 配置npm淘宝镜像

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

或者

npm config set registry https://registry.npmmirror.com

    2) 临时使用

npm install express --registry https://registry.npm.taobao.org
npm install express --registry https://registry.npm.taobao.org --disturl=https://npm.taobao.org/mirrors/node

    3) 配置后可通过下面方式来验证是否成功

npm config get registry 或 npm info express

    4)  通过cnpm使用

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

    5) 恢复使用

npm config set registry https://registry.npmjs.org

    6) 

  1.4.安装全局

  npm install -g @vue/cli

  1.5.创建

  切换项目目录.执行:vue create hello

  1.6.处理环境

  Vue.config.productionTip = true

  1.7 网络axios

npm install axios --save

import axios from 'axios'

 axios.get('http://localhost:8003/user/dept/1').then((value)=>{

                console.log(value);

 })

  1.8 打包相对路径

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true
})

  1.9 按需加载

const cart = () => import('@/views/cart.vue')
import home from "../views/home.vue"
const router = new  VueRouter({
    routes: [
        { path: "/home",  component: home },
        { path: "/cart", component: cart }
    ]
})

export default router

  1.10  动画

    1) 动画效果

<button @click="isShow = !isShow">show</button>
<Transition name="title" appear>
  <h1 v-show="isShow">
    XXXXXXXXXXX
  </h1>
</Transition>

.title-enter-active {
    animation: k1 1s;
}

.title-leave-active {
    animation: k1 1s reverse;
}

@keyframes k1 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0px);
    }

}

    2) 过度效果

<Transition name="fade" appear>
  <h1 v-show="isShow">
     k2k2k2k2k2k2
  </h1>
</Transition>

.fade-enter-active, .fade-leave-active{
    transition: 0.5s linear;
}

.fade-enter,.fade-leave-to {
    transform: translateX(-100%);
}

.fade-enter-to,.fade-leave
{
    transform: translateX(0);
}

    3) 第三方animate.css

主页

https://animate.style/

<script>
import 'animate.css'
</script>

 <Transition-Group appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInLeftBig"
            leave-active-class="animate__fadeOutRightBig"
            >
            <h1 v-show="!isShow" key="1">
                k1k1k1k1k1
            </h1>
            <h1 v-show="isShow" key="2">
                k2k2k2k2k2k2
            </h1>
</Transition-Group>

  1.11 资源

npmjs.com

  1.12

2.常用设置

  2.1 trigger on tab

    勾上就可以用tab 补全标签签

  2.2 

3.功能插件

  3.1 vue-router@3.6.5

        1) 安装 router.vuejs.org/zh/

npm add vue-router@3.6.5

        2) 引入

import VueRouter from "vue-router"

Vue.use(VueRouter)

    3) 创建实例

import LoginPage from "@/views/login.vue"
import HomePage from "./views/home.vue"
const router = new VueRouter({
  routes: [
    { path:'/', component: LoginPage },
    { path:'/home', component: HomePage },        
  ]
})

new Vue({

  render: h => h(App),

  router: router

}).$mount('#app')

     4) 使用

  3.2 vuex

        1) 安装

https://v3.vuex.vuejs.org/zh/

npm add vuex@3

        2) 新建js文件

import Vuex from 'vuex'

import Vue from 'vue'

Vue.use(Vuex)

#新建仓库

const store = new Vuex.Store({

  strict: true,

  state: {

    title: 'www',

    count: 100

  }

})

#导入

export default store

        3) 挂载

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'

Vue.config.productionTip = false

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

        4) 简单使用

  3.3 axios

    1) 地址 

https://www.axios-http.cn/

    2) 安装

npm add axios

    3) 引入

import axios from 'axios'
import Vue from 'vue'
Vue.use(axios)

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
   
  // 对响应数据做点什么
  return response
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default instance

    4) 应用

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
})

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log(config)
  return config
}, function (error) {
  return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response
}, function (error) {
  return Promise.reject(error)
})

export default request

  3.4 dayjs

    1) 安装

npm install dayjs --save

    2) 全局

import dayjs from 'dayjs'
Vue.filter('format', (value, str = 'YYYY-MM-DD HH:mm:ss')=>{ 
  return dayjs(value).format(str);
});

    3) 应用

<div>{{ 1708911527747 | format }}</div>

4.扩展插件

  4.1 Vue - Official     

  代码提示，替换Volar, vue3专用

  4.2 ESLint

    1) 官网

  代码风格检查工具 

https://standardjs.com/rules-zhcn.html

    2) 自动修正配置

 //当保存的时候，esline自动帮我们修复错误

    "editor.codeActionsOnSave": {

        "source.fixAll": true

    },

    //保存代码，不自动格式化

    "editor.formatOnSave": false

  4.3 Chinese (Simplified)

  4.4 Live Server

  4.5 Vue VSCode Snippets

代码补全工具

  4.6 Path Intellisense

  @/ 提示, 打开设置 - 首选项 - 搜索 Path Intellisense - 打开 settings.json ，添加

"path-intellisense.mappings": {
     "@": "${workspaceRoot}/src"
 }

  4.7