当前位置： 首页 > news >正文

网站设计制作 厂,哪个网站可以做市场调研报告,网站建设公司的市场开拓方案,设计制作的广告公司参与公司项目开发一段时间了#xff0c;项目用到了很多新的技术#xff08;vite,vue3,ts等等#xff09;#xff0c;但是框架都是别人搭好的#xff0c;然后就想说如果是自己的话#xff0c;会从零搭建一个吗#xff0c;于是就有了这篇文章。 目录 一、涉及到的相关依…参与公司项目开发一段时间了项目用到了很多新的技术vite,vue3,ts等等但是框架都是别人搭好的然后就想说如果是自己的话会从零搭建一个吗于是就有了这篇文章。 目录 一、涉及到的相关依赖 二、项目创建 三、项目配置 3.1、Tsx支持 3.2、路径别名配置 3.3、less配置 3.4、router配置 3.5、vuex配置 3.6、ant-design-vue框架配置使用 3.7、配置eslint 一、涉及到的相关依赖 dependencies: {ant-design/icons-vue: ^7.0.1,ant-design-vue: ^3.2.15,vue: ^3.3.8,vue-router: ^4.2.5,vuex: ^4.1.0},devDependencies: {types/node: ^20.10.3,typescript-eslint/eslint-plugin: ^6.13.2,typescript-eslint/parser: ^6.13.2,vitejs/plugin-vue: ^4.5.0,vitejs/plugin-vue-jsx: ^3.1.0,consola: ^3.2.3,eslint: ^8.55.0,eslint-config-prettier: ^9.1.0,eslint-plugin-prettier: ^5.0.1,eslint-plugin-vue: ^9.19.2,less: ^4.2.0,less-loader: ^11.1.3,prettier: ^3.1.0,typescript: ^5.2.2,vite: ^5.0.0,vite-plugin-style-import: ^2.0.0,vite-require: ^0.2.3,vue-tsc: ^1.8.22} 二、项目创建 本人用的node版本是16.10.0的根据vite官方文档运行如下命令然后根据提示创建即可 然后进入项目安装依赖就可以直接运行了。 安装完的项目目录结构如下 │ ├─public # 静态资源目录 │ │ favicon.ico │ │ │ ├─src │ │ │ App.vue # 入口vue文件 │ │ │ main.ts # 入口文件 │ │ │ shims-vue.d.ts # vue文件模块声明文件 │ │ │ vite-env.d.ts # vite环境变量声明文件 │ │ │ │ │ ├─assets # 资源文件目录 │ │ │ logo.png │ │ │ │ │ └─components # 组件文件目录 │ │ HelloWorld.vue │ │ │ │ .gitignore │ │ index.html # Vite项目的入口文件 │ │ package.json │ │ README.md │ │ tsconfig.json # tsconfig配置文件 │ │ vite.config.ts # vite配置文件这样的配置显然是不够的下面就需要我们进行其他的项目配置了。 三、项目配置 3.1、Tsx支持 首先需要安装官方维护的vite插件vitejs/plugin-vue-jsx,这个插件其实核心还是vue/babel-plugin-jsx,只是在这个插件上封装了一层供vite插件调用。vue jsx语法规范 $ npm install vitejs/plugin-vue-jsx -D

or

\( yarn add vitejs/plugin-vue-jsx -D安装完之后在vite.config.ts进行插件使用代码如下 import { defineConfig } from vite; import vue from vitejs/plugin-vue; import vueJsx from vitejs/plugin-vue-jsx;export default defineConfig({plugins: [vue(),vueJsx() //插件使用], });后面就可以把目录中的app.vue、HelloWorld.vue以及shims.vue.d.ts这三个文件删除了因为后面我们就只需要写tsx文件了。 然后src目录下新增App.tsx文件写入如下代码 import { defineComponent } from vueexport default defineComponent({setup() {return () {return (divh1Vue3 tsx ts ant-design-vue/h1/div)}} }) 然后运行npm run dev就可以看到app.tsx中的内容了。 这里做个小优化一般项目都会有开发环境测试环境线上环境等所以我们可以在项目根目录下新增三个文件.env.dev.env.alpha.env.prod分别代表上面三个环境然后在文件中配置各自的端口号和服务地址 然后在vite.config.ts里做如下配置 import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx// https://vitejs.dev/config/ const envPrefix [VITE, VUE] export default defineConfig(({ mode }) {const envConfig loadEnv(mode, process.cwd(), envPrefix)console.log(envConfig, envConfig)return {base: ./,envPrefix: envPrefix,server: {port: Number(envConfig.VUE_APP_DEV_PORT),proxy: {/server-api: {target: envConfig.VUE_APP_SERVER,changeOrigin: true}}},define: {process.env: envConfig},plugins: [vue(), vueJsx()]} })最后在package.json中增加三条命令 scripts: {serve:dev: vite --host --mode dev,serve:alpha: vite --host --mode alpha,serve:prod: vite --host --mode prod,}, 然后就可以通过运行对应命令在本地快速启动并代理到各自的环境而不用每次修改服务地址。 3.2、路径别名配置 路径别名同样需要在vite.config.ts中配置此时具体配置如下 import { resolve } from path // 此处如果报错则安装 node/path依赖 import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx// https://vitejs.dev/config/ const envPrefix [VITE, VUE] export default defineConfig(({ mode }) {const envConfig loadEnv(mode, process.cwd(), envPrefix)console.log(envConfig, envConfig)return {base: ./,envPrefix: envPrefix,server: {port: Number(envConfig.VUE_APP_DEV_PORT),proxy: {/server-api: {target: envConfig.VUE_APP_SERVER,changeOrigin: true}}},resolve: {alias: [{ find: , replacement: resolve(__dirname, src) },{ find: /^~/, replacement: }]},define: {process.env: envConfig},plugins: [vue(), vueJsx()]} })此时在项目中就可以直接使用新的路径别名了使用vscode可能会没有路径提示这个时候只需要在jsconfig.json/tsconfig.json配置paths和baseUrl就会出现路径提示了具体如下 {compilerOptions: {// ...baseUrl: .,paths: {/*: [src/*],},// ... }3.3、less配置 Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。因此没有必要为它们安装特定的 Vite 插件但必须安装相应的预处理器依赖依赖安装完项目就可以直接解析less文件了。 \) npm install less less-loader -D

or

\( yarn add less less-loader -D注意这里有个坑less 和 less-loader 需要写到 devDependencies 里面否则运行会报错。 使用 可以在tsx文件下新建index.module.less文件然后tsx页面中引入直接使用如下 .page_title {font-size: 16px;color: pink; } 3.4、router配置 请注意路由一定得安装4.0.0以上版本最好直接安装当前最新版本。 查看 vue-router 版本 \) npm info vue-router versions安装最新版本 $ npm install vue-router4.2.5

or

\( yarn add vue-router4.2.5然后在src下新建router和view等文件和文件夹 在router文件夹下的index.ts配置对应路由 import { createRouter, createWebHistory, RouteRecordRaw } from vue-routerconst routes: RouteRecordRaw[] [{path: /,name: Home,component: () import(/views/home),meta: {title: 首页}},{path: /user,name: User,component: () import(/views/user),meta: {title: 个人中心}} ]const router createRouter({history: createWebHistory(/),routes: routes,scrollBehavior(to, from, savedPosition) {// 始终滚动到顶部console.log(to, from, savedPosition)return { top: 0 }} })export default router as typeof router { refresh?: () string }接着在main.ts这个入口文件中插件的方式通过vue引入就可以了 import { createApp } from vue import ./style.css import router from ./router import App from ./AppcreateApp(App).use(router).mount(#app) 最后在app.tsx中引入ruter-view进行如下配置 import { defineComponent } from vue import { RouterView, RouterLink } from vue-routerexport default defineComponent({setup() {return () {return (divh1Vue3 tsx ts ant-design-vue/h1divRouterLink to{/} style{{ marginRight: 20px }}首页/RouterLinkRouterLink to{/user}用户中心/RouterLink/divRouterView //div)}} })从新运行项目就可以使用路由跳转切换页面了 3.5、vuex配置 请注意vuex也得安装4.0.0及以上版本最好直接安装当前最新版本。跟上面router一样查看下最新版本然后直接安装 \) npm install vuex4.1.0

or

\( yarn add vuex4.1.0创建目录结构 代码如下 system.ts import { Module } from vuexexport interface SystemState {showLogin: boolean }export const system: ModuleSystemState, any {state: {showLogin: false},getters: {getLoginVisible(state) {return state.showLogin}},mutations: {SET_SHOW_LOGIN(state, visible) {state.showLogin visible}},actions: {showLoginAction({ commit }, visible) {commit(SET_SHOW_LOGIN, visible)}} }user.ts import { Module } from vuexinterface UserInfoProperties {username: stringage: number }export interface UserState {userInfo: UserInfoProperties }export const user: ModuleUserState, any {state: {userInfo: {username: helen,age: 32}} } index.ts import { createStore, useStore as useRawStore } from vuex import { user, UserState } from ./modules/user import { system, SystemState } from ./modules/systemexport interface StoreState {user: UserStatesystem: SystemState }export const STORE_KEY storeconst store createStoreStoreState({modules: {user,system},plugins: [] })export function useStore() {return useRawStore(STORE_KEY) as typeof store }export default store然后在main.ts中引入 import { createApp } from vue import ./style.css import router from ./router import App from ./App import store, { STORE_KEY } from ./storecreateApp(App).use(store, STORE_KEY).use(router).mount(#app) 最后就可以在页面中直接引入使用了 遇到的问题 1、引入使用vuex时报错无法找到模块声明文件vuex  解决方法在vite.env.d.ts里面声明vuex导出其声明文件路径 declare module vuex {export * from vuex/types/index.d.tsexport * from vuex/types/helpers.d.tsexport * from vuex/types/logger.d.tsexport * from vuex/types/vue.d.ts } 3.6、ant-design-vue框架配置使用 安装框架和图标库 \) npm install ant-desing-vue ant-design/icons-vue -D

or

\( yarn add ant-design-vue ant-design/icons-vue -D安装vite样式引入插件 \) npm install vite-plugin-style-import -D

or

$ yarn add vite-plugin-style-import -D在vite.config.ts中进行配置 import { resolve } from path // 此处如果报错则安装 node/path依赖 import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx import { viteRequire } from vite-require import { createStyleImportPlugin, AndDesignVueResolve } from vite-plugin-style-import// https://vitejs.dev/config/ const envPrefix [VITE, VUE] export default defineConfig(({ mode }) {const envConfig loadEnv(mode, process.cwd(), envPrefix)console.log(envConfig, envConfig)return {base: ./,envPrefix: envPrefix,server: {port: Number(envConfig.VUE_APP_DEV_PORT),proxy: {/server-api: {target: envConfig.VUE_APP_SERVER,changeOrigin: true}}},// 依赖优化-预构建optimizeDeps: {include: [vue, vuex, vue-router, ant-design-vue, ant-desgin/icons-vue]},resolve: {alias: [{ find: , replacement: resolve(__dirname, src) },{ find: /^~/, replacement: }]},define: {process.env: envConfig},css: {preprocessorOptions: {less: {javascriptEnabled: true}}},plugins: [vue(),vueJsx(),// 兼容vite不支持requireviteRequire(),createStyleImportPlugin({resolves: [AndDesignVueResolve()]})]} })然后就可以在home的index.tsx页面中引入使用了 import { defineComponent } from vue import { useStore } from /store import { Button } from ant-design-vue import { RightOutlined } from ant-design/icons-vue import classes from ./index.module.lessexport default defineComponent({name: Home,setup() {const store useStore()console.log(store, store)return () {return (div class{classes.page_title}home pageRightOutlined //divButton typeprimary onClick{() console.log(aa)}ant-design-vue Button/Button/)}} }) 遇到问题  1、引入antd-design-vue组件后点击按钮报错Uncaught TypeError: Cannot read properties of undefined (reading ‘value‘) 解决方法看博客说是vue3.2.13和antd4.0.7版本不兼容然后就把4换成3了antd换成3的后运行又报错了原来按需加载样式vite-plugin-style-import配置后还要在vite.cofing.ts里面配置css css: {preprocessorOptions: {less: {javascriptEnabled: true}}}, 3.7、配置eslint 增加eslint用来规范Typescript以及vue代码首先安装相关依赖 npm i eslint eslint-plugin-vue typescript-eslint/parser typescript-eslint/eslint-plugin -D 这三个依赖的作用分别是 eslint: ESLint的核心代码eslint-plugin-vueESLint关于检测vue代码规范的插件typescript-eslint/parserESLint的解析器用于解析typescript从而检查和规范Typescript代码typescript-eslint/eslint-plugin这是一个ESLint插件包含了各类定义好的检测Typescript代码的规范 结合Prettier和Eslint npm i prettier eslint-config-prettier eslint-plugin-prettier -D 其中 prettierprettier插件的核心代码eslint-config-prettier解决ESLint中的样式规范和prettier中样式规范的冲突以prettier的样式规范为准使ESLint中的样式规范自动失效eslint-plugin-prettier将prettier作为ESLint规范来使用 依赖装好之后便可以开始相关文件的配置工作了首先在项目根目录新增.eslintrc.js文件 这个地方遇到了一个坑如果eslint-config-prettier版本号在8.0.0以上则在.eslintrc.js配置extends中不需要再新增 prettier/typescript-eslint 这个配置否则执 行eslint会报错 module.exports {parser: vue-eslint-parser,parserOptions: {parser: typescript-eslint/parser, // Specifies the ESLint parserecmaVersion: 2020, // Allows for the parsing of modern ECMAScript featuressourceType: module, // Allows for the use of importsecmaFeatures: {// Allows for the parsing of JSXjsx: true}},extends: [plugin:vue/vue3-recommended,plugin:typescript-eslint/recommended,plugin:prettier/recommended],rules: {typescript-eslint/no-explicit-any: off,vue/multi-word-component-names: off,} } 紧接着增加prettier配置再在项目根目录中新增.prettierrc.js文件 // 具体配置可以参考 https://prettier.io/docs/en/options.html const base {printWidth: 100,tabWidth: 2,useTabs: false,semi: false, // 未尾逗号vueIndentScriptAndStyle: true,singleQuote: true, // 单引号quoteProps: as-needed,bracketSpacing: true,trailingComma: none, // 未尾分号jsxBracketSameLine: false,jsxSingleQuote: false,arrowParens: always,insertPragma: false,requirePragma: false,proseWrap: preserve,htmlWhitespaceSensitivity: strict,endOfLine: auto,embeddedLanguageFormatting: auto, } module.exports {…base,overrides: [{files: [*.js, *.jsx, *.mjs, *.ts, .tsx],options: base},{files: [.vue],options: base},{files: *.md,options: {…base,tabWidth: 4,proseWrap: never}}] }; 做到这里eslint除了脚本配置之外就配置完成了现在只需在package.json中配置好脚本命令就完成了整个eslint的配置工作了。 {…scripts: {dev: vite,build: vue-tsc –noEmit –skipLibCheck vite build, // 增加skipLibCheck可以跳过引入库的ts检查serve: vite preview,lint: eslint src,lint:fix: eslint src –fix –ext .ts,.tsx}, }遇到的问题 1、运行 npm run lint的时候直接报错了[ERR_REQUIRE_ESM]: require() of ES Module 解决方法把.eslintrc.js后缀改成cjs 2、从新运行又报错ReferenceError: module is not defined in ES module scope This file is being 解决方法把package.json的type去掉方案参考https://www.cnblogs.com/tudou1179006580/p/17698047.html 从新执行npm run lint 发现app.tsx有个错误执行npm run lint:fix修复错误后就可以提交代码了。 这样一个项目框架就搭建好了