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
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