Vue.js项目搭建与配置-优快云博客

1.第一个项目

1.1 下载node.js

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

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