# npm6.x       
npm create vite@latest vite-vue-js-template --template vue          
# npm7+,extra double-dash is needed:      
npm create vite@latest vite-vue-js-template -- --template vue    
# yarn   
yarn create vite vite-vue-js-template --template vue    
# pnpm 
pnpm create vite vite-vue-js-template --template vue

#打开项目cd<your-project-name>#安装依赖npminstall#启动项目npmrundev复制代码

import{defineConfig}from'vite';import{resolve}from'path';importvuefrom'@vitejs/plugin-vue';exportdefaultdefineConfig({base:'./',plugins:[vue(),],resolve:{alias:{'@':resolve(__dirname,'./src'),},},server:{//是否开启httpshttps:false,//端口号port:3000,//监听所有地址host:'0.0.0.0',//服务启动时是否自动打开浏览器open:true,//允许跨域cors:true,//自定义代理规则proxy:{},},build:{//设置最终构建的浏览器兼容目标target:'es2015',//构建后是否生成sourcemap文件sourcemap:false,//chunk大小警告的限制（以kbs为单位）chunkSizeWarningLimit:2000,//启用/禁用gzip压缩大小报告reportCompressedSize:false,},});复制代码

├── dist/└── src/    ├── api/                       // 接口请求目录    ├── assets/                    // 静态资源目录    ├── common/                    // 通用类库目录    ├── components/                // 公共组件目录    ├── router/                    // 路由配置目录    ├── store/                     // 状态管理目录    ├── style/                     // 通用样式目录    ├── utils/                     // 工具函数目录    ├── views/                     // 页面组件目录    ├── App.vue    ├── main.js├── tests/                         // 单元测试目录├── index.html├── jsconfig.json                  // JavaScript 配置文件├── vite.config.js                 // Vite 配置文件└── package.json复制代码

npmivue-router@4复制代码

└── src/    ├── router/    	├── modules/  // 路由模块        ├── index.js  // 路由配置文件复制代码

import{createApp}from'vue';importAppfrom'./App.vue';importrouterfrom'./router';createApp(App).use(router).mount('#app');复制代码

npmipinia复制代码

└── src/    ├── store/    	├── modules/  // 仓库模块        ├── index.js  // 仓库配置文件复制代码

import{defineStore}from'pinia';exportconstuseCounterStore=defineStore('counter',{state:()=>({count:1,}),actions:{accumulate(){this.count++;},},});复制代码

import{createPinia}from'pinia';conststore=createPinia();exportdefaultstore;export*from'./modules/counter';复制代码

import{createApp}from'vue';importAppfrom'./App.vue';importstorefrom'./store';importrouterfrom'./router';createApp(App).use(router).use(store).mount('#app');复制代码

npmitdesign-vue-next复制代码

import{createApp}from'vue';importTDesignfrom'tdesign-vue-next';//引入组件库全局样式资源import'tdesign-vue-next/es/style/index.css';constapp=createApp(App);app.use(TDesign);复制代码

npminstallunplugin-vue-componentsunplugin-auto-import-D复制代码

importAutoImportfrom'unplugin-auto-import/vite';importComponentsfrom'unplugin-vue-components/vite';import{TDesignResolver}from'unplugin-vue-components/resolvers';exportdefault{plugins:[AutoImport({resolvers:[TDesignResolver({library:'vue-next'})],}),Components({resolvers:[TDesignResolver({library:'vue-next'})],}),],};复制代码

npmiaxios复制代码

└── src/	├── api  // 接口    ├── utils/        ├── request.js  // axios 请求库二次封装复制代码

importaxiosfrom'axios';//创建请求实例constinstance=axios.create({baseURL:'/api',//指定请求超时的毫秒数timeout:1000,//表示跨域请求时是否需要使用凭证withCredentials:false,});//前置拦截器（发起请求之前的拦截）instance.interceptors.request.use((config)=>{/***在这里一般会携带前台的参数发送给后台，比如下面这段代码：*consttoken=getToken()*if(token){*config.headers.token=token*}*/returnconfig;},(error)=>{returnPromise.reject(error);},);//后置拦截器（获取到响应时的拦截）instance.interceptors.response.use((response)=>{/***根据你的项目实际情况来对response和error做处理*这里对response和error不做任何处理，直接返回*/returnresponse;},(error)=>{const{response}=error;if(response&&response.data){returnPromise.reject(error);}const{message}=error;console.error(message);returnPromise.reject(error);},);//导出常用函数/***@param{string}url*@param{object}data*@param{object}params*/exportfunctionpost(url,data={},params={}){returninstance({method:'post',url,data,params,});}/***@param{string}url*@param{object}params*/exportfunctionget(url,params={}){returninstance({method:'get',url,params,});}/***@param{string}url*@param{object}data*@param{object}params*/exportfunctionput(url,data={},params={}){returninstance({method:'put',url,params,data,});}/***@param{string}url*@param{object}params*/exportfunction_delete(url,params={}){returninstance({method:'delete',url,params,});}exportdefaultinstance;复制代码

import{post}from'@/utils/request';exportdefaultclassUser{/***登录*@param{String}username用户名*@param{String}password密码*@returns*/staticasynclogin(username,password){returnpost('/login',{username,password,});}}复制代码

<script>importUserfrom'@/api/user';exportdefault{data(){return{username:'',password:'',};},methods:{asynclogin(){constres=awaitUser.login(this.username,this.password);console.log(res);},},};</script>复制代码

npmiless-D复制代码

<stylelang="less"></style>复制代码

└── src/    ├── style/        ├── variables.less  // 全局样式文件复制代码

import{resolve}from'path';exportdefaultdefineConfig({css:{preprocessorOptions:{less:{modifyVars:{hack:`true;@import(reference)"${resolve('src/style/variables.less')}";`,},math:'strict',javascriptEnabled:true,},},},});复制代码

/*深度选择器*/:deep(selector){/*...*/}/*插槽选择器*/:slotted(selector){/*...*/}/*全局选择器*/:global(selector){/*...*/}复制代码

# 表示是最顶层的 EditorConfig 配置文件root = true# 表示所有文件适用[*]# 缩进风格（tab | space）indent_style = space# 控制换行类型(lf | cr | crlf)end_of_line = lf# 设置文件字符集为 utf-8charset = utf-8# 去除行首的任意空白字符trim_trailing_whitespace = true# 始终在文件末尾插入一个新行insert_final_newline = true# 表示仅 md 文件适用以下规则[*.md]max_line_length = offtrim_trailing_whitespace = false# 表示仅 ts、js、vue、css 文件适用以下规则[*.{ts,js,vue,css}]indent_size = 2复制代码

const{defineConfig}=require('eslint-define-config');module.exports=defineConfig({root:true,env:{browser:true,node:true,jest:true,es6:true,},plugins:['vue'],parser:'vue-eslint-parser',parserOptions:{ecmaVersion:'latest',sourceType:'module',allowImportExportEverywhere:true,ecmaFeatures:{jsx:true,},},extends:['airbnb-base','eslint:recommended','plugin:vue/vue3-essential','plugin:vue/vue3-recommended','plugin:prettier/recommended',],rules:{//禁止使用多余的包'import/no-extraneous-dependencies':0,//确保在导入路径内一致使用文件扩展名'import/extensions':0,//确保导入指向可以解析的文件/模块'import/no-unresolved':0,//首选默认导出导入/首选默认导出'import/prefer-default-export':0,//要求使用let或const而不是var'no-var':'error',//禁止使用new以避免产生副作用'no-new':1,//禁止变量声明与外层作用域的变量同名'no-shadow':0,//禁用console'no-console':0,//禁止标识符中有悬空下划线'no-underscore-dangle':0,//禁止在可能与比较操作符相混淆的地方使用箭头函数'no-confusing-arrow':0,//禁用一元操作符++和--'no-plusplus':0,//禁止对function的参数进行重新赋值'no-param-reassign':0,//禁用特定的语法'no-restricted-syntax':0,//禁止在变量定义之前使用它们'no-use-before-define':0,//禁止直接调用Object.prototypes的内置属性'no-prototype-builtins':0,//禁止可以在有更简单的可替代的表达式时使用三元操作符'no-unneeded-ternary':'error',//禁止重复模块导入'no-duplicate-imports':'error',//禁止在对象中使用不必要的计算属性'no-useless-computed-key':'error',//强制使用一致的缩进indent:['error',2],//强制使用骆驼拼写法命名约定camelcase:0,//强制类方法使用this'class-methods-use-this':0,//要求构造函数首字母大写'new-cap':0,//强制一致地使用function声明或表达式'func-style':0,//强制一行的最大长度'max-len':0,//要求return语句要么总是指定返回的值，要么不指定'consistent-return':0,//强制switch要有default分支'default-case':2,//强制剩余和扩展运算符及其表达式之间有空格'rest-spread-spacing':'error',//要求使用const声明那些声明后不再被修改的变量'prefer-const':'error',//强制箭头函数的箭头前后使用一致的空格'arrow-spacing':'error',},overrides:[{files:['*.vue'],rules:{//要求组件名称总是多个单词'vue/multi-word-component-names':0,},},],});复制代码

distnode_modules!.prettierrc.js复制代码

npmiprettier-D复制代码

module.exports={//一行最多120字符printWidth:120,//使用2个空格缩进tabWidth:2,//不使用缩进符，而使用空格useTabs:false,//行尾需要有分号semi:true,//使用单引号singleQuote:true,//对象的key仅在必要时用引号quoteProps:'as-needed',//jsx不使用单引号，而使用双引号jsxSingleQuote:false,//末尾需要有逗号trailingComma:'all',//大括号内的首尾需要空格bracketSpacing:true,//jsx标签的反尖括号需要换行jsxBracketSameLine:false,//箭头函数，只有一个参数的时候，也需要括号arrowParens:'always',//每个文件格式化的范围是文件的全部内容rangeStart:0,rangeEnd:Infinity,//不需要写文件开头的@prettierrequirePragma:false,//不需要自动在文件开头插入@prettierinsertPragma:false,//使用默认的折行标准proseWrap:'preserve',//根据显示样式决定html要不要折行htmlWhitespaceSensitivity:'css',//vue文件中的script和style内不用缩进vueIndentScriptAndStyle:false,//换行符使用lfendOfLine:'lf',//格式化嵌入的内容embeddedLanguageFormatting:'auto',//html,vue,jsx中每个属性占一行singleAttributePerLine:false,};复制代码

##OS.DS_Store.idea.editorconfigpnpm-lock.yaml.npmrc#Ignoredsuffix*.log*.md*.svg*.png*.ico*ignore##Local.husky##Built-files.cachedist复制代码

npmieslint-plugin-prettiereslint-config-prettier-D复制代码

module.exports={extends:['airbnb-base','eslint:recommended','plugin:vue/vue3-essential','plugin:vue/vue3-recommended','plugin:prettier/recommended'],}复制代码

{"editor.codeActionsOnSave":{"source.fixAll":true,"source.fixAll.eslint":true}}复制代码

module.exports={root:true,defaultSeverity:'error',extends:['stylelint-config-standard','stylelint-config-prettier'],plugins:['stylelint-order'],rules:{//不允许未知函数'function-no-unknown':null,//指定类选择器的模式'selector-class-pattern':null,//禁止空源码'no-empty-source':null,//指定字符串使用单引号'string-quotes':'single',//禁止未知的@规则'at-rule-no-unknown':[true,{ignoreAtRules:['tailwind','apply','variants','responsive','screen','function','if','each','include','mixin',],},],//指定@规则名的大小写'at-rule-name-case':'lower',//指定缩进indentation:[2,{severity:'warning',},],//禁止未知的伪类选择器'selector-pseudo-class-no-unknown':[true,{ignorePseudoClasses:['global'],},],//禁止未知的伪元素选择器'selector-pseudo-element-no-unknown':[true,{ignorePseudoElements:['v-deep'],},],'order/properties-order':['position','top','right','bottom','left','z-index','display','justify-content','align-items','float','clear','overflow','overflow-x','overflow-y','margin','margin-top','margin-right','margin-bottom','margin-left','padding','padding-top','padding-right','padding-bottom','padding-left','width','min-width','max-width','height','min-height','max-height','font-size','font-family','font-weight','border','border-style','border-width','border-color','border-top','border-top-style','border-top-width','border-top-color','border-right','border-right-style','border-right-width','border-right-color','border-bottom','border-bottom-style','border-bottom-width','border-bottom-color','border-left','border-left-style','border-left-width','border-left-color','border-radius','text-align','text-justify','text-indent','text-overflow','text-decoration','white-space','color','background','background-position','background-repeat','background-size','background-color','background-clip','opacity','filter','list-style','outline','visibility','box-shadow','text-shadow','resize','transition',],},}复制代码

# .stylelintignore# 旧的不需打包的样式库*.min.css# 其他类型文件*.js*.jpg*.woff# 测试和打包目录/test//dist/*/public/*public/*/node_modules/复制代码

module.exports={overrides:[{files:['*.vue','**/*.vue','*.html','**/*.html'],extends:['stylelint-config-html'],rules:{//指定关键帧名称的模式'keyframes-name-pattern':null,//禁止未知的伪类选择器'selector-pseudo-class-no-unknown':[true,{ignorePseudoClasses:['deep','global'],},],//禁止未知的伪元素选择器'selector-pseudo-element-no-unknown':[true,{ignorePseudoElements:['v-deep','v-global','v-slotted'],},],},},{files:['*.less','**/*.less'],customSyntax:'postcss-less',extends:['stylelint-config-standard','stylelint-config-recommended-vue'],},],};复制代码

{"stylelint.validate":["css","less","postcss","scss","vue","sass"]}复制代码

#初始化仓库gitinit#初始化npxhusky-init#安装依赖npminstall复制代码

eslint--fix./src--ext.vue,.js,.ts复制代码

npmilint-staged-D复制代码

{"lint-staged":{"*.{js,jsx,ts,tsx}":["prettier--write","eslint--fix"],"*.vue":["prettier--write","eslint--fix","stylelint--fix"],"*.{html,vue,vss,sass,less}":["prettier--write","stylelint--fix"],"package.json":["prettier--write"],"*.md":["prettier--write"]},}复制代码

npxlint-staged复制代码

<Header><Body><Footer>复制代码

<type>(<scope>):<subject>复制代码

npminstall-Dcz-git复制代码

{"scripts":{},"config":{"commitizen":{"path":"node_modules/cz-git"}}}复制代码

/**@type{import('cz-git').UserConfig}*/module.exports={extends:['@commitlint/config-conventional'],rules:{},prompt:{useEmoji:false,emojiAlign:'center',allowCustomIssuePrefixs:false,allowEmptyIssuePrefixs:false,},};复制代码

npminstall-gcz-gitcommitizen复制代码

echo'{"path":"cz-git"}'>~/.czrc复制代码

{"path":"cz-git","useEmoji":true}复制代码

module.exports={extends:['@commitlint/config-conventional']}复制代码

npxhuskyadd.husky/commit-msg"npx--no-installcommitlint--edit$1"复制代码

"homepage":"https://[username].github.io/github-actions-demo",复制代码

name:ViteVueDeployon:push:#master分支有push时触发branches:[master]jobs:deploy:#指定虚拟机环境runs-on:ubuntu-lateststrategy:matrix:node-version:[14.x,16.x]steps:-name:Checkout#拉取GitHub仓库代码uses:actions/checkout@v3-name:UseNode.js${{matrix.node-version}}#设定Node.js环境uses:actions/setup-node@v3with:node-version:${{matrix.node-version}}-name:Install#安装依赖run:npminstall-name:Build#打包run:npmrunbuild-name:Deployuses:JamesIves/github-pages-deploy-action@v4with:#部署打包目录folder:dist#密钥名token:${{secrets.VITE_VUE_DEPLOY}}#分支branch:gh-pages复制代码