前提条件安装node.js控制台安装yarn：npminstall-gyarn查看yarn版本：yarn--version注：-g表示全局安装淘宝镜像安装：npminstall-gcnpm--registry=https://registry.npm。taobao.org功能：安装成功后使用cnpmixxx代替npminstallxxx解决VScodedisabledscript错误。以管理员身份运行vscode执行：get-ExecutionPolicy，显示Restricted，表示禁止状态---准备好了--如果不好就去百度找解决方案，在项目部分安装脚手架：有node.js的时候直接用，有点慢：npminstall-g@vue/cli安装yarn后可用：yarnglobaladd@vue/cli安装淘宝镜像后可用：cnpminstall-g@vue/cli查看vue版本：vue--version或vue-V（简写-是大写“V”）upgrade（可省略）：npmupdate-g@vue/cliyarnglobalupgrade--latest@vue/clinpmupdate-g@vue/clicreateprojectvuecreateprojectnamevueuiCreateprojectmodewithvuecreateprojectname(Pleasepickapreset):Manuallyselectfeatures(手动选择特征)Babel:convertes6toes5--competeforlowerversion浏览器Router:routeCSSPre-processors:forlessLinter/Formatter,sass的css编译工具:codespecification检查是否使用history作为路由模式(Usehistorymodeforrouter?):N--兼容性不是很好，用什么预处理器(PickaCSSpre-processor...):Less--会是哪个，选哪个。代码格式检查器Fan(Pickalinter/formatterconfig):ESLint+Standardconfig何时触发代码验证(Pickadditionallintfeatures):Lintonsave(修改和保存代码时)Lint>andfixoncommit(执行提交时)配置信息生成通过文件（WheredoyoupreferplacingconfigforBabel,ESLint,etc.?）：在>dedicatedconfigfiles--是否生成一个单独的配置文件来记录以上一系列的选择（将其保存为未来项目的预设?):基础项目的原型已经创建。各文件/文件夹的作用文件名/文件夹作用目录说明公开打包后，生成的项目目录自带node_modules依赖包。src工程文件存放位置是在工程目录下自动生成的。main.js项目的启动入口在项目目录下App.vue根组件在项目目录下yarn.lock在项目目录下安装好yarn后，项目目录下会安装一个package.json依赖配置json包项目目录全局配置项目目录下自动生成自建vue.config.js，项目目录下自动生成自建.eslintrc.js代码规范包。接口src下会自动生成api工程。自建utils工具模块src，全局样式文件src下自建样式自建组件将路由公共组件放在src下，自建视图将路由视图组件放在src下，自建路由器将路由，自建src下内置模块路由，如果父路由有默认子路由，不要命名父路由——会warn但不报错。子路由的路径为空，将作为默认子路由渲染导航守卫router.beforeEach((to,from,next)=>{})所有导航都会经过导航守卫to：要进入的目标路由对象--判断访问的是否是特定页面（有权限关系），如果不是，则释放from：当前导航即将离开的路由--next一般无用:release的方法--next()表示给release，可以写你想去的页面地址扩展介绍ESLint是一个代码格式校验工具vue代码Shortcuts-vue.jsom通过$加数字快速光标定位的基本结构："这个结构的描述":{"prefix":"Shortcutwords--generallywords","body":["代码片段需要写成"],"description":""//不用担心}远程添加GIT库外部插件：有一个github账号--没用就自己创建一个创建项目配置key：（如果不配置，会报这个错误：Pleasemakesureyouhavethecorrectaccessrightsandtherepositoryexists.--解释：没有权限）---参考删除.ssh文件下的known_hosts（默认在这个C:\Users\计算机名.ssh）重新生成ssh公钥认证所需的公钥和私钥文件：详细操作：终端操作：ssh-keygen-trsa-C"你的git账号/你的gitaccountemailaddress”--回车接收内容：Generatingpublic/privatersakeypair.Enterfilewhichtosavethekey(/c/Users/Administrator/.ssh/id_rsa):--Enter---Rememberthisaddress--你可以更改地址，但不建议更改Enterpassphrase(为空表示没有密码):--不要输入密码直接回车，否则每次上传都要输入密码再次输入相同的密码：--同上直接回车，系统会自动进入C:\Users\username\.ssh文件夹下生成两个文件，id_rsa和id_rsa.pub用记事本打开id_rsa.pub，复制里面的内容，复制到github账号设置（settings）下的“SSHandGPGkeys”目录下。新建一个“SSHkeys”从名称开始，复制内容到内容区进行验证验证是否成功：在Git中输入ssh-Tgit@github.com，验证是否与github连接成功。回复：git@github.com:Permissiondenied(publickey)。成功回复：无法确定主机'github.com(xxx.x??x.xxx.xxx)'的真实性。RSA密钥指纹是SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.Areyousureyouwanttocontinueconnecting(yes/no/[fingerprint])?---必须输入yes或no，否则不成功--如果不输入yes或no，将返回：Pleasetype'yes','no'orthefingerprint:--然后输入yes警告：永久添加'github.com,xxx.xx.xxx.x??xx'(RSA)到已知主机列表。您好账户名！您已成功通过身份验证，但GitHub不提供shell访问。本地：初始化库：gitinit创建用户和邮箱：gitconfig--globaluser。name"自起名，写在引号内"---gitconfig--globaluser.email"我的邮箱"添加文件到暂存区：gitadd带后缀的文件名，不带引号---通过git添加。将当前文件夹的所有内容以提交暂存区文件的形式上传到本地仓库，形成历史记录：gitcommit-m"本次提交的描述，可以在引号内写文字或英文"将远程仓库的地址添加到本地工厂库：gitremoteaddorigingit@github.com:Samele-248/front-page.git推送到远程工厂库：gitpush--set-upstream(简写-u)origin分支名称（通常在括号中Thething)删除指定的远程工厂库：gitremoteremove工厂库名(例如：origin)查看有哪些工厂库：gitremote-v修改远程工厂库地址信息：gitremoteset-url远程工厂库名(已有工厂库名）切换分支新地址：gitcheckout"name"查看本地分支：gitbranch查看远程分支：gitbranch-r可能错误：无法跟新输入命令：gitpush-uoriginmaster错误：错误：无法将某些引用推送到'git@github.comhint：更新被拒绝，因为您当前分支的提示落后于提示：其远程副本。在再次推送之前集成远程更改（例如提示：'gitpull...'）。提示：有关详细信息，请参阅“gitpush--help”中的“关于快进的注意事项”。原因：github中的README.md文件不在本地代码目录下。解决方法：可以通过以下命令合并代码【注：pull=fetch+merge】输入命令：gitpull--rebaseoriginmaster执行上面的代码后，可以看到里面多了README.md文件本地代码库再次执行：gitpush-uoriginmaster完成代码上传到githubaxios请求打包：封装一个axios组件，使用方便——用于请求数据axios.create({configure})：类似于实例化一个axios对象，可以理解为复制一个axios，不同的axios实例可以有不同的配置，并且不会互相冲突——复制的axios和axios本身的功能是一样的，用一个变量来acceptaxios.create()实例写法constrequest=axios.create({baseURL:'http://www.baidu.com'//公共请求地址Part})interceptor:请求拦截器request.interceptors.request.use(//config是请求的相关配置信息对象，可以在这里修改function(config){//在这里统一设置tokenconstuser=JSON.parse(window.localStorage.getItem('user'))if(user){config.headers.Authorization=`Bearer${user.token}`}//发送请求returnconfig//请求返回后才发送如果没有return，则无法发送请求},function(error){returnPromise.reject(error)})使用时会报错：要安装它，可以运行：npminstall--savecore-js/modules/es.object.to-string.js---版本问题，安装最新版本的core-js解决：npminstallcore-js@3.6.4或者yarnaddcore-js@3.6。4--这个版本号可能会随着时间变化无效，如果无效，安装新版本后重新运行（启动项目）：npmrunserve或yarnserve解决axios请求的数据，因为i的位数s太大精度不准：（可能不会用）原因：axios为了方便，内部会使用“JSON.parse”将原始JSON格式字符串转为js对象——数据超出精度，尾部转换为零。JSON会将过大的数字“格式化”，让数据最后变成零——让数据不是原来的数据解决方法：安装数据扩展包：npmijson-bigint说明：BigNumber会转换一个数组将超出js安全整数范围的数据转换成BigName类型的对象，使用BigNumber.toString()获取原始正确数据constrequest=axios.create({baseURL:'http://www.baidu.com',//publicpartoftherequestaddress//数据再处理--定义一个之后TransformResponse:[function(data){////参数data是后端返回的原始数据（没有经过JSON格式处理的数据）try{//后端返回的数据不一定是JSON格式string，如果没有，使用JSONbig.parse会报错json数据',e)返回数据}}]})参数说明：headers中设置请求头参数--headers:{对应数据值}路径中":xxx"表示路径参数，参数需要使用时需要指定，用于替换通过data--data:{correspondingdata}设置的请求体参数（postrequestdata）通过params--params设置的查询参数（Queryparameter）--params:{correspondingdata}--一般是非必要的注意：Body参数使用data设置，Query参数使用params设置，Headers参数使用he设置广告。element-uifrom表单验证：el-from组件必须作为表单数据对象绑定到模型中，用于需要验证的表单项el-form-item绑定到prop属性注意：prop属性需要指定表单对象中的数据名称通过el-from组件trigger的rules属性配置校验规则：validationperiod--blue:（失去焦点后触发），change:（发生变化时触发）基本校验规则：required:requiredpattern:regularexpression--/^xxxxxx/range:使用min和max属性定义范围对于字符串和数组类型，会根据长度进行比较，对于数字类型，数字不会匹配小于min，不大于maxlen：要验证的字段的确切长度validator：自定义验证规则---后面接一个函数，接收三个参数（rule,value,callback）=>{}规则：验证形式规则，它是一个对象，属lly不用，但是需要写value：验证项的值，输入框是value，boolean项是布尔值。验证成功：callbace()validationfailed:callback(newError('errormessage')){validator(rule,value,callback){if(value==='
'){//判断里面的值是值''的内容callback(newError('请输入文章内容'))}else{callback()}}}手动触发表单验证：setrefforel-from，开始一个Name--不重复--vue中控制dom的一种方式通过ref获取el-form组件，调用组件的validate来验证this.$refs[refvalue].validate((valid)=>{});Form:如果要获取自定义列模板中的当前遍历数据，需要在模板（slot）上声明slot-scope="anarbitraryname"--例如：templateslot-scope="scope"date:time数据是一个数组。设置时，时间具有一目了然的功能。单击清除时，数据变为空。这时候就涉及到null[0]和null[1]的值了。这两个值是不存在的，所以需要做非空判断来判断时间数据是否有值。如果没有值，它将被格式化为空值。如果有值，则值css将添加到style标签中。当页面有效时，不允许修改元素的样式。这时候如果要修改元素的样式，就需要“突破”其中一种分解方法：/deep/格式：/deep/要改变的类名（frame中的类名-直接复制){style}/deep/.el-form-item__error{top:70%;}布局布满全屏（不定height--width（装配，左侧固定宽高，右侧固定高度，全宽），绝对定位相对于每个margin为零）axios可以设置requestheader通过headers选项导入导入地址。导入地址后面地址中的“@”是src目录的路径，后面加一个斜杠。建议：如果加载的资源路径在当前目录下，是正常的。任何需要查找父路径的人都使用“@”。当您将自定义参数传递给事件处理函数时，您无法获取原始事件参数。如果你想事件处理函数自定义参数后，如果想获取原始事件本身的参数，手动指定$event，代表事件本身的参数。全局通信总线：创建公共组件，导入vue实例，导出vueimportvuefrom'vue'exportdefaultnewvue()importcomponent:importcustomname--afrom'address'publisher:a.$emit('customeventname',optionalparameter)registerparty:a.on('fromDefineparameters',(val)=>{})注意：自定义事件的名称是一致的，有收获的可以留个赞哦~