手机网站图片自适应,国美在线网站建设,wordpress godaddy,wordpress会员管理git代码仓库#xff0c;直接下载压缩包使用
1、首先要安装node.js(18.3 或更高版本)
2、创建vue3项目
npm create vuelatest然后按照自己的需要进行选择就行 到此vue3项目创建完成#xff0c;接下来是搭建项目架构
3、配置Vant (移动端ui)
vue3项目引入vant#xff0c…git代码仓库直接下载压缩包使用
1、首先要安装node.js(18.3 或更高版本)
2、创建vue3项目
npm create vuelatest然后按照自己的需要进行选择就行 到此vue3项目创建完成接下来是搭建项目架构
3、配置Vant (移动端ui)
vue3项目引入vant按需引入组件
// 引入vant
npm i vant
// 辅助按需引入样式
npm i vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D在文件vite.config.js添加以下代码 import { defineConfig } from vite
import vue from vitejs/plugin-vue
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { VantResolver } from vant/auto-import-resolverexport default defineConfig({plugins: [vue(),AutoImport({resolvers: [VantResolver()],}),Components({resolvers: [VantResolver()],}),]
})
使用 vue3中直接在使用的组件按需引入需要用的组件就行例如
// test.vue
templatevan-button typeprimary按钮/van-button
/template4、配置环境变量
配置各个环境的配置文件
// 例如在.env.development文件中NODE_EVNdevelopment // 环境变量
VITE_BASE_APIhttp://dev.os-api.vertlet.com // 请求的地址// package.json 文件scripts: {dev: vite --open --mode development,test2: vite --open --mode test,gray: vite --open --mode gray,production: vite --open --mode production,build:gray: vite build --mode gray,build:dev: vite build --mode development,build:test2: vite build --mode test,build:prod: vite build,preview: vite preview},5、配置axios请求
// 创建request.ts 文件封装axios
import axios from axios
import { showToast } from vantconst instance axios.create({baseURL: import.meta.env.VITE_BASE_API,timeout: 30000,headers: {X-Requested-With: XMLHttpRequest,},
})// 请求拦截
instance.interceptors.request.use(function (config) {const token localStorage.getItem(token)// 在发送请求之前做些什么if (token) {config.headers[Xl-Os-Token] token}if (config.method get) {config.params.from_mobile 1} else {config.data.from_mobile 1}return config},function (error) {// 对请求错误做些什么return Promise.reject(error)},
)// 响应拦截
instance.interceptors.response.use((response) {const { data } responseif (data.code 0) {// 请求成功return data}showToast(data.msg)},function (err) {console.log(err)return Promise.reject(err)},
)export function GET(url: string, params: object, config?: object) {return instance({method: get,url,params,...config,})
}export function POST(url: string, data: object, config?: object) {return instance({method: post,url,data,...config,})
}
6、pinia使用
定义store
// store/counter.tsimport { ref, computed } from vue
import { defineStore } from piniaexport const useCounterStore defineStore(counter, () {const count ref(0)const doubleCount computed(() count.value * 2)function increment() {count.value}return { count, doubleCount, increment }
})
使用store 在需要的vue组件中引入store
// views/index.vuetemplatepcount:{{ count }}/ppdoubleCount:{{ doubleCount }}/pvan-button typeprimary clickincrementanniu/van-button
/templatescript setup langts
// import { getShopGroupList } from /service/index
import { useCounterStore } from /stores/counter
import { storeToRefs } from piniaconst store useCounterStore()
const { count, doubleCount } storeToRefs(store)
const { increment } store
/script
style langscss scoped/style
移动端设配问题
使用amfe-flexablepostcss-pxtorem进行移动端适配 amfe-flexable 是阿里发布的一套可伸缩适配方案。它能根据设备的宽高来设置页面body元素的字体大小将1rem设置为设备宽度/10以及在页面大小转换时可以重新计算这些数值但仅限于style/style标签里设置的px对于行内样式和百分比是不生效的。 postcss-pxtorem是postcss的一个插件可以将对应的像素单位转换为rem。在vite中可以直接对其进行配置因为vite已经集成了postcss。 其中最重要的配置属性为 rootValue根元素的值即1rem对应的像素值大小。一般设置为设计稿尺寸/10 以及一些其他属性propList需要进行转换的css属性的值可以使用通配符。如*意思是将全部属性单位都进行转换[“position”]会匹配到background-position-yselectorBlackList不进行单位转换的选择器。如设置为字符串body则所有含有body字符串的选择器都不会被该插件进行转换若设置为[/^body$/]则body会被匹配到而不是.bodyexclude不需要进行单位转换的文件 mediaQuery是否允许像素在媒体查询中进行转换 //npm方式
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev//pnpm方式
pnpm add postcss-pxtorem -D
pnpm add amfe-flexible -D
如果项目用的是ts还需要安装
npm i --save-dev types/postcss-pxtorem由于amfe-flexible没有提供类型信息文件所以需要自己定义一个.d.ts文件 使用declare关键字来告诉TypeScript编译器存在一个名为amfe-flexible的模块但是不提供具体的类型信息
// amfe-flexible.d.tsdeclare module amfe-flexible// tsconfig.app.json
{extends: vue/tsconfig/tsconfig.dom.json,include: [env.d.ts,src/**/*,./auto-imports.d.ts,./components.d.ts,./amfe-flexible.d.ts],exclude: [src/**/__tests__/*],compilerOptions: {composite: true,tsBuildInfoFile: ./node_modules/.tmp/tsconfig.app.tsbuildinfo,allowJs: true,baseUrl: ./,paths: {/*: [src/*]}}
}
// main.jsimport amfe-flexible
// vite.config.js 配置postcss-pxtoremimport { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import postCssPxToRem from postcss-pxtorem// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},css:{postcss:{plugins:[postCssPxToRem({rootValue:37.5,propList:[*],})]}}
})
引入scss
npm i sass -D// vite.config.tsexport default defineConfig({plugins: [// ...css: {preprocessorOptions: {scss: {// 配置全局sass变量注入additionalData: use /styles/variable.scss;,},},},
})添加调试面板VConsole vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板 npm install vconsole// main.jsimport VConsole from vconsole;if (import.meta.env.MODE ! production) {
// 生产环境不展示new VConsole();
}遇到问题 BUG在vue文件中导入ts会出现标红报错Cannot find module ‘/service/index’ or its corresponding type declarations.Vetur(2307) 解决在使用vue2的时候用的插件是vetur但是vue3推荐使用的是vue-offical。只要切换一下插件就没问题了。 BUG配置vant后由于插件能帮我们自动引入因此无需手动引入组件导致ts识别为“Cannot find name ‘showToast’”如图 解决需要把生成的auto-imports.d.ts和components.d.ts引入tsconfig中如图
