1、npm init vite@lastest
2、项目目录结构
3、npm install（i） 安装依赖（是根据package.json中devDependencies的依赖安装的）
启动命令 dev
打包命令 build
预览生产环境命令 preview
解决方案：全局安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
但是系统不让使用cnpm
因为全局安装后需要执行以下策略，以管理员的身份运行 Windows PowerShell
然后执行set-ExecutionPolicy RemoteSigned（用来改变执行策略）
选择Y
然后再进入到vite-demo中安装依赖
4、代码规模及其他配置，
以下3个是新增的
- .editorconfig 不同IDE统一编码风格
- .prettierrc 编码规则
- .prettierignore 忽略文件
5、配置@路径
在vite.config.ts文件中配置
原来文件的代码
安装node类型声明文件,让vite 识别@符号，执行
npm i @types/node -D
接下来在vite,config.ts中配置
const path = require("path")
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里使用nodejs的模块，可能会报错，需要安装node的类型声明文件
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
接下来让配置tsconfig.json 配置baseUrl，paths
这一步的作用是让 IDE 可以对路径进行智能提示
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
6、使用npm 安装依赖失败
安装依赖总是失败，所以node 降级到v.16.19.0版本
7、CSS预处理器
安装
npm i -D sass
vite全局配置css（ps:一定要加分号）
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "@/assets/styles/flex.scss";
@import "@/assets/styles/reset.scss";
@import "@/assets/styles/common.scss";
`,
},
},
},
8、因为common.scss中有注释掉的css报错（待解决）
9、卸载依赖
10、安装路由
使用Vue3 安装对应的router4版本
使用Vue2安装对应的router3版本
npm install vue-router@4
使用
1、在src下的router目录新建index.ts和routes.ts
2、在routes.ts中定义路由
ps:注意路由数组routes的类型，有的说是
3、index.ts
导入routes
创建路由
导入路由
在main.ts中引入
import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router";
createApp(App).use(router).mount("#app");
11、安装Element UI
npm install element-plus --save
在main.ts
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
12、安装Animate.css(动画库)
npm install animate.css --save
引用
import 'animate.css';
<h1 class="animate__animated animate__bounce">An animated element</h1>13、安装axios
npm install axios -S
使用
import axios from "axios";
14、pinia
安装
npm install pinia -S
在main.ts中引入
createPinia 是一个hock ,导出后是一个插件，需要app.use()注册
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
const store = createPinia()
let app = createApp(App)
app.use(store)
app.mount('#app')
定义store
src目下新建一个名为stores的文件下
新建 index.ts
store-namespace.ts // 以枚举的形式定义store的名字
export const enum Names {
Test = 'TEST'
}
index.ts 定义一个store
ps: state 是一个箭头函数，返回一个对象，在对象中定义值
import { defineStore } from 'pinia'
import { Names } from './store-namespce'
export const useTestStore = defineStore(Names.Test, {
state:()=>{
return {
current:1,
age:8
}
},
//类似于computed 可以帮我们去修饰我们的值
getters:{
},
//可以操作异步 和 同步提交state
actions:{
setCurrent () {
this.current++
}
}
})
在组件中应用
<template>
<div>
<button @click="Add">+</button>
<div>
{{Test.current}}
</div>
<div>
{{Test.age}}
</div>
</div>
</template>
<script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {
Test.setCurrent()
}
</script>
<style>
</style>
修改state的5中方法
1、直接修改 Test.current++
2、$patch方法批量修改 Test.$patch({current:200,age:300})
3、$patch 方法的函数形式修改Test.$patch((state)=>{state.current++;state.age = 40}) （推荐此方法）
4、通过$state修改，但是必须修改整个对象的所有属性Test.$state = {current:10,age:30}
5、通过actions修改（可以直接使用this, actions 中的函数不要使用箭头函数，this问题）
actions:{
setCurrent () {
this.current++
}
}
解构store
在Pinia是不允许直接解构是会失去响应性的
解决方案是storeToRefs()
import { storeToRefs } from 'pinia'
const Test = useTestStore()
const { current, name } = storeToRefs(Test)
<template>
<div>origin value {{Test.current}}</div>
<div>
pinia:{{ current }}--{{ name }}
change :
<button @click="change">change</button>
</div>
</template>
<script setup lang='ts'>
import { useTestStore } from './store'
const Test = useTestStore()
const change = () => {
Test.current++
}
const { current, name } = Test
console.log(current, name);
</script>
<style>
</style>
Actions，getters
相关资料：
标签：npm,const,ts,current,vue3,Test,import,vite From： https://www.cnblogs.com/websmile/p/17103788.html