郑州房地产网站建设,百度搜索网站的图片,高德地图国际版,wordpress顶部图标不清晰vite官网
项目初始化
准备安装工作(按步骤创建)
npm init vuelatest创建完成后再次安装对应插件
然后百度配置main.ts里面引入
npm i pinia --save //安装pinia
npm i vue-router --save //安装router
npm i axios --save //安装axios
//安装sass或less
npm add -D scss
npm…vite官网
项目初始化
准备安装工作(按步骤创建)
npm init vuelatest创建完成后再次安装对应插件
然后百度配置main.ts里面引入
npm i pinia --save //安装pinia
npm i vue-router --save //安装router
npm i axios --save //安装axios
//安装sass或less
npm add -D scss
npm add -D less快速创建项目–推荐
npm init vitelatest project-name --template vue-ts//
//npm 7, 需要额外的双横线
npm init vitelatest project-name -- --template vue-ts // npm 6.x然后根据提示所选配置即可
创建完安装对应插件
eslint校验代码工具的配置
prettier格式化工具配置
VueUse工具函数包集成配置
npm i types/node --save-dev修改 tsconfig.json文件内容
{compilerOptions: {typeRoots: [node_modules/types,src/types],target: esnext,useDefineForClassFields: true,module: esnext,moduleResolution: node,strict: true,jsx: preserve,sourceMap: true,resolveJsonModule: true,esModuleInterop: true,lib: [esnext, dom],baseUrl: ./,paths:{: [src],/*: [src/*],}},include: [src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue]
}修改 vite.config.ts文件内容
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import * as path from path;// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {: path.resolve(__dirname, src)}},plugins: [vue()],// server: {port: 3000, hmr: {host: 0.0.0.0,port: 3000,},proxy: {/api: {target: your https address,changeOrigin: true,rewrite: (path: string) path.replace(/^\/api/, )}}}
});// PS
/*
//设置别名alias: {: path.resolve(__dirname, src)}},plugins: [vue()],server:
{port: 3000,
//启动端口hmr: {host: 0.0.0.0,port: 3000,},// 设置 https
代理proxy: {/api: {target: your https address,changeOrigin: true,rewrite: (path: string) path.replace(/^\/api/, )}*/
安装eslint
npm i eslint eslint-plugin-vue --save-dev
因为 ESLint 默认使用 Espree 进行语法解析无法识别 TypeScript 的一些语法所以需要安装 typescript-eslint/parser 替代掉默认的解析器npm install typescript-eslint/parser --save-dev
安装对应的插件 typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充提供了一些额外的适用于 ts 语法的规则。npm install typescript-eslint/eslint-plugin --save-dev创建配置文件 .eslintrc.js
module.exports {parser: vue-eslint-parser,parserOptions: {parser: typescript-eslint/parser,ecmaVersion: 2020,sourceType: module,ecmaFeatures: {jsx: true}},extends: [plugin:vue/vue3-recommended,plugin:typescript-eslint/recommended,],rules: {// override/add rules settings here, such as:}
};创建忽略文件.eslintignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*node_modules/
dist/
dist-ssr
*.local# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?命令行式运行修改 package.json
{scripts: {eslint:comment: 使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件,eslint: eslint --ext .js,.vue --ignore-path .gitignore --fix src,}
}#### 安装prettierjavascript
npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev创建配置文件 prettier.config.js 或 .prettierrc.js
//粘贴板module.exports {printWidth: 80, tabWidth: 4, useTabs: false, semi: true, singleQuote: true, quoteProps: as-needed, jsxSingleQuote: false, trailingComma: all, bracketSpacing: true, jsxBracketSameLine: false, arrowParens: always, rangeStart: 0, rangeEnd: Infinity, prettierrequirePragma: false, prettierinsertPragma: false, proseWrap: preserve, htmlWhitespaceSensitivity: css, lfendOfLine: auto
}// 详解版
module.exports { // 一行最多 80 字符printWidth: 80,// 使用 4 个空格缩进tabWidth: 4,// 不使用 tab 缩进而使用空格useTabs: false,// 行尾需要有分号semi: true,// 使用单引号代替双引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: as-needed,// jsx 不使用单引号而使用双引号jsxSingleQuote: false,// 末尾使用逗号trailingComma: all,// 大括号内的首尾需要空格 { foo: bar }bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数只有一个参数的时候也需要括号arrowParens: always,// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 prettierrequirePragma: false,// 不需要自动在文件开头插入 prettierinsertPragma: false,// 使用默认的折行标准proseWrap: preserve,// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: css,// 换行符使用 lfendOfLine: auto
}****命令行式运行修改 package.json
{scripts: {prettier:comment: 自动格式化当前目录下的所有文件,prettier: prettier --write}
}安装Pinia
Pinia这个文档移步
npm install pinia在src文件里面创建store文件-index.ts在main.ts中引用pinna
import {createPinia} from pinia
const store createPinia()
createApp(App).use(router).use(store).mount(#app)index.ts文件
import { defineStore } from piniaexport const studyStore defineStore(getNum, {state:(){return {num:1 as number}},//类似于computed 可以帮我们去修饰我们的值getters:{},//可以操作异步 和 同步提交stateactions:{}
})
其他页面使用
templatedivspandata:{{ test.num }}/spanbutton clickadd数字/button/div
/templatescript setup langts
import { studyStore } from ../store
const test studyStore()let add () {test.num
}/script安装Vue-Router
在这里插入代码片安装VueUse
在这里插入代码片安装scss 或 less
在这里插入代码片安装axios/进行封装
在这里插入代码片项目优化一下
在这里插入代码片vs出线ref红波线解决
2种方式
1 引入ref爆红记得去更新vetur 安装vetur TypeScript这个插件
2 vetur 这个插件不支持vue3的setup语法糖的写法格式了
你只需要停掉现有的vetur
再去下载vue Language Features和TypeScript Vue Plugin
第一个是支持vue3的标准语法的
第二个是针对ts的都安装后重启vscode即可
项目包
