okay, we're going to use the vucli to create our new project so to get started let's install the vucli we'll do that from the terminal, so i've got the windows terminal open here and if you're using windows be sure to open this up in administrator mode, so now, we just need to use mpm to install the vucli globally like this and typically this is all you'll do to install the cli, but for this course we're going to install a specific version like this if you're following along with this course be sure to use the same version to ensure you don't run into any surprises or problems along the way okay, so the cli is installed and you can see we got a few mpm mornings this isn't too unusual and the view team works constantly to keep their packages up to date and vulnerabilities to a minimum, so we'll ignore those for now, but now that that's installed we can use the cli to generate our new project if you're following along you can skip this step because we're actually going to clone an existing starting repo here in a minute, but i just want to show how to create a new cli project? which is what we did with the project we'll be cloning so here i am in my dev folder which is where i put all of my development projects and then i'm going to just run this command view create build a bop this will create a build a bop folder and generate a project for us okay, so that brings up a series of prompts notice here that you can choose a default preset here or i can choose manually select features to bootstrap my project with i want a little bit more control, so i'm going to choose manually select features and you can see that the vcli presents a handful of available out of the box features to choose from each of the features listed here has the ability when you select one to do several things including things like prompting for more information on the command line modifying the web pack config installing mpm packages and generating files okay, so the only features that we want are babble and a linter which is what's selected here by default so i'll go ahead and hit enter and now we need to choose what linter config we want i'm just going to use the yes lint with error prevention only so i'll leave this first option selected and hit enter and then i'll select lint on save so it will run my linter whenever, i save a file and then i have an option here as to whether i want to store my config files for things like babble and es lint and dedicated config files or inside the package json file i prefer them to be in their own dedicated config files so i'll hit enter here and then finally i have the option to save all of this configuration as a preset for a future project, but i'm just gonna go ahead and say no here and hit enter okay, so now it's generating our project for us and installing all of our npm dependencies cool now that that's done let's take a quick peek at what it generated and then we'll start writing some code of our own so this generated this build a bot folder so i'm going to change directory into that folder and then i'm going to go ahead and open this up with visual studio code which i can do by just typing code dot if you don't have visual studio code installed i'd highly recommend it it's a full featured editor with good extension support for view okay, so now speaking of extensions if we take a look at my visual studio code extensions which i can do by hitting control shift p on windows and then typing extensions you can see here that i have a couple of extensions installed first there's this es lint extension from microsoft which helps with linting and formatting all of our code if you're not familiar with linting it is tooling to enforce code styles and conventions and then there's this view language features extension this one adds view specific formatting and syntax highlighting and it's pretty critical for working with view nvs code all right now there are a few es lint settings that i'd recommend you add also so over here in this es lint rc dot js file that was created for us by the cli, i'm going to add a few rules first of all if you're working in windows like i am you'll want to add this line break style rule if you're on windows and you don't add this you may end up getting linting errors about incompatible lined endings and then i'm going to also add these three rules these first two just indicate when to require commas and semi colons if you prefer no semi colons you can feel free to change this semi rule to never instead of always and this last rule is mostly just to help with formatting of code for the best layout for the course you can choose to add this or not and now that i've made changes to our linting config i need to go ahead and run our linter so that it changes our files to match this config so down here in my terminal, which on windows i can open using control tilda and in here i'm just going to run mpm run lint again if you're planning to coat along in this course you can skip all of this because i've done all of this in the project that we're going to clone here shortly but i'm going to go ahead and run this all right and you can see that that updated a few files for us to match our new es lin config settings all right now there's just one last thing that i want to configure over here in my visual studio code workspace extensions which i can get to by hitting control, shift p and then typing workspace i can open up my workspace settings inside here i'm going to add a few additional settings this just makes it so that any es lint required formatting issues are fixed for me automatically whenever, i save my files this is a good setting that i recommend turning on for working with view and then there's one more setting that i want to add and it's this setting this just turns off inlay hints in vs code when working with view vs code will sometimes show some inline hints in our editor and this can get in the way of things for the course so i'm just going to disable this all of the rest of the settings you see in this file you can ignore these are just settings that i've created to format my editor correctly for the course okay, so we've got a new project generated from the cli and we've got some initial linting configuration updated now let's explore what exactly the cli generated for us。
粉丝125获赞582

啊,这些东西呢,我们都在今后会详细的说,我们这里就简单的把这个地,把这个命令复制一下,然后进入终端啊,这个无这个无所谓啊,随便在哪个目的都可以,然后粘贴一下这个命令回车 目的是呢,把他的我们的原地址啊,就下载的原地址配置到我们国内的服务器啊,是一个淘宝的服务器。好了,配置好了过后呢,我们就是最后检查一下啊, n 片 coffee get register, 看一下这个检查我们配配置的是比是不是成功的,如果说得到这么一个结果的话,配置就没问题,没问题吧。啊,这是 配置原地址。好,配置原地址配置好了过后,接下来我们就可以安装这个脚手架工具了。好,怎么安装呢?我们这里使用全局安 安装的方式啊, npm insto 表示安装,横杠系呢表示全局安装,那么至于什么叫全局安装啊,那还有没有别的安装方式?还有局部安装,那又是什么回事呢?不用管啊,跟着我说就行了,目前解释呢也不好解释, 粘贴过来回车等他安装就完成了啊,稍微等一会安装完了过后呢,你可以使用这个命令 vu 啊,两个横杠 version 来检查一下目前的 vucd 的版本是多少,如果说打打出来没问题的话,说明就安装成功了啊, vucd 就没问题了。好,这里可能要稍微等一下啊,安装一会喝口水。 好,应该差不多了。好,接下来让我们来看一下啊。嗯,使用 vu cd virtue of view virgin。 好,我们看到了,这里呢,我这里呢 vu cd 的版本呢是四点三点一。 好,你们那边版本能有可能不一样啊?无所谓,区别不大。对,我们这个和资本可能区别不大好。那么安装好了之后呢?接下来该怎么说呢?我们接下来就要使用这个教授加工具来搭建工程了。


view 环境搭建的第一步,安装 note view 依赖于 note gs, 所以要先安装那个 note gs 环境,下载地址就是 note gsdlrg 安装包下载后直接双击,然后就进行了安装,安装之后呢,然后就有可以输入 no 的命令, no 的杠 v, 然后可以查看 no 的版本信息。第二步,安装 npm 镜像, 因为默认恩田默认的镜像是国外的,使用起来速度比较慢,所以我们这里使用淘宝的。第三步,安装全局无异议,肯定缴手价。 呃,命令就用刚才的用。第四步,创建新项目,这个命令是 wild park, 然后是项目名。第五步, 安装项目依赖,刚才只是初始画了这个项目所需要的文件,然后现现在使用这个命令呢,将会下载相关的依赖包,用 npm install。 第六步,也是最后一步,然后出入 npm 状,第一杯就可以看到控制台打出来 acp locals, 默认端口是八零八零,然后进入浏览器可以看到这个效果。

找到官网下载最新版,然后呢,我们再下载其他的版本,找到牌威尔斯瑞丽 c 四,然后呢,我们再向下去查找,下载十四版本,再下载十三版本,再下载十二版本, 下载完成之后,先去安装最新版,发现不支持温度的其系统,再去安装实时版本, 发现也不支持问题系统。然后我们找到六四,找到肉的十四, 找到两个链接,发现微软停止对温七更新之后,后续发布的 no 的十四也不再支持温七系统,我们去按 安装十三版本,再去安装脚手架,发现对于 no 的版本有要求,所以呢,我们需要再去卸载 no 的十三,安装 no 的十二。 安装完成之后,我们再去安装 cnpm, 发现呢和 no 的版本不匹配,再去查找 cnpm 对应的版本,我们进入官网查找到 cnpm 最新版,要求弄得最低版本为十四,然后呢,我们再查找第一版本,再查找第一版本七点一点一,我发现对于弄得的最低版本要求是十,我们就可以选择当前这个 版本,复制安装语句指定版本,再用 cnpm 安装 vivo 交手架。总结,文气下可以安装怒的十二,可以安装 cnpm, 也可以不安装。

当我们把组建的工程结构做了一些划分之后啊,整个目录结构呢,显得非常的清晰了,但是这里边仍然存在着诸多的问题。比较显而易见的问题呢,有两个, 第一个呢,就是这个样式咋办?每个组件呢,他有属于自己的样式,你不能把所有的组件的样式全部写到页面的 style 里边吧。我们最好的做法呢,是能够把这些样式代码呀,直接给他整到无忧的组件里边去, 说最舒服的。但是显而易见,这样子做呢,浏览器是无法识别的,不知道人家干什么,但是不可否认的是,这是我们最舒服的写法。 那么第二个问题呢,之前我也提到过,就是啊,你在写 view 的时候啊,最好不要去写的什么 temperature。 为啥呀?这考虑到一个效率问题,因为我们知道你这个 temperature 的代码呀,会在运行的时候被 view 转换成这个轮的函数,那么这 转换不得需要时间吗?最高效率的做法是什么呢?就直接书写这个 render 函数就完事了。对启动文件如此,对每一个组件仍然如此,就不要写这个 campage。 而应该使用什么呢?使用 render 啊,你返回一个 d i v, 那我就 return h div, 然后给他配置一些属性内样式,然后再给他配置一些子元素。但是用绝对的函数的写法呢,虽然效率高,但写起来恶心啊。你看,无论是第一个问题还是第二个问题, 都在提示我们,就是我们想写的代码和浏览器喜欢的代码,他就不一样。如果说你经常关注袁老师的抖音,应该知道,前不久我讲过工程化,工程化里边的构建工具啊,他就是专门来解决这个问题的, 让我们可以舒舒服服的写代码,然后经过工程化的构建工具转换,他就会转换成运行环境喜欢的代码。所以说 我们这里呢差的无非就是一个构建工具,那么构建工具就有很多了,什么 vipak 啊, es builder 啊, roll up 啊,这些都能够达到要求。在我们后期的 vipic 课程里边,我还带着大家用 vipic 手动的去搭了一个 view 的工程, 只不过呢,自己去搭虽然足够的灵活,但是呢要配置的代码呢,是比较多的,比较繁琐,他不复杂,只是比较繁琐。复杂跟繁琐是两码事,让你到楼下取个快递,你觉得麻烦,但是他不复杂。而有些算法问题呢,就一行代码,你死活就想不出来,那叫复杂啊,复杂和繁琐两码事啊。 好,既然自己手动搭建呢,是比较麻烦的。好在呢,无忧官方给我们出了一个脚手架,叫做无忧颗粒啊,后来呢,无忧官方又出了一个叫做位置,实际上这两个脚手架都是要学习的哈。呃,目前呢,我讲的是无忧二,因为很多公司仍然在用无忧二开发,所以呢, 我们这里使用的是无忧颗粒,我们可以利用包管理器 npm 来全局安装一个无忧的脚手架,他的名字呢,叫做无忧颗粒啊,我这里已经全局安装过了啊,就不再安装了。当你全局安装完成之后呢,他会给你得到一个无忧的命令啊,你可以通过 versing 来查看一下这无忧脚手架的版本, 注意啊,这是脚手架的版本,帮你搭工程的,而不是无忧本身啊。好,那么通过这个命令呢,就可以创建一个无忧工程,然后给这个工程呢取个名字叫做无忧 app, 那么这个名字呢,你自己随便取。好,回车,接下来呢,他会出现一些提示的信息, 那么他这里呢,问,你要使用五六三还是用五六二啊?我们这里呢,使用五六二,然后下面呢还有一个手动选项啊。回车,问,你,在这个工程里边你需要用到哪些东西啊?这些玩意工程化里边都应该学习过的哈。我们这里呢,就选一个 bab 吧,把这个令词给他去掉,因为前期学习的时候 关注点主要在技术本身,不要被其他的东西所干扰。好,回车,让你选择 view, 版本选择二啊。问你,这些工程画里边的各种配置文件是单独的配置文件呢,还是放到这个拍点接上里边啊?选第一个,是不是把这个设置保存起来,将来可以直接使用,我就不保存了, 回收好,稍等。片刻之后呢,这个工程就算搭建起来了,搭建出来过后的工程目录呢,就长这个样子。如果说你是跟着袁老师学的工程话,那这个目录已经再熟悉不过了。在袁老师的课程里边,在学习维佑之前,我们早就这么干了, 这里边的每一个文件你都应该非常熟悉了哈。好,然后对比一下我们之前的目录呢,首先是这个玩意,这个玩意跑哪去了呢?哎,他是放到 note 吗?就是目录里边放到这里边去了,对吧?你学过包括 还利息的知识,一定非常深刻的理解了 note 毛球是干嘛的?那么这里呢,我们可以看到啊,是不是这个无右出现在这, 看到没?好再来对比。那么之前呢,有一个 index 表, atm 二就是页面文件,对吧?那么这个页面文件跑哪去了呢?他跑到这里来了, 同样的,这个文件里边也是啥都没有空的啊,就一个 div app, 所有东西靠 gs 文件给它构建起来,跟我们之前的做法是完全一样的,只不过呢,这个页面上没有引入任何的 gs 啊,这是因为我们使用了构建工具,构建工具把它打包完成之后,它会自动引入 gs 啊,这一块你不用担心, 也不用去修改它,好继续对比。之前呢,有一个 s r c 目录,那么现在呢,是不是也是有一个 s r c 目录,对吧?展开这个 s r c 目录里边是不是有个魅点 g s, 那么这里是不是有个魅点 g s? 好,咱们打开它, 好的弄下来啊,那么看到这个代码是不跟我们之前写的代码基本相同,对吧?这句话呢,不用去管都可以把它删掉。现在呢,不去解释啊,你看这一块代码跟我们之前的魅点介绍代码是不基本一样的,只不过呢,他把这一块呢,写成了一个箭头函数而已,其实是一样的,是吧,所以说不多解释了。好,我们继续看他的目录啊, 他的目录里边呢,有一些额外的文件夹,这个文件夹我们可以暂时把它删掉,然后剩下的结构跟我们之前搭的工程是完全一样, app 跟组件 component, 其他的组件 没问题吧?只不过呢,我们会发现啊,他这些主见的后缀名呢,是一个无忧作为后缀名,而我们之前的主见后缀名呢,是 js 文件。那你觉得浏览器能识别哪一个呢?是不是一定能识别这个 js, 那个无忧那个玩意,他到底是啥?是不是识别不了?但是啊, 像这个文件,他虽然浏览器不喜欢,但开发者喜欢呀,为啥呀?这个玩意叫做 s f c, 全称叫做 single file, ctrl 单文件组件就是一个组件,文件里边它可以写三种代码, atm 代码、 g s 代码和 cs 代码都可以书写。而我们要开发一个组件,不就是写这些东西吗?那么三种代码就高度类聚在一个文件里边,更加符合我们的开发习惯。但是这样的代码浏览器不认识啊,那怎么办呢?有勾建工具,你怕啥呀, 他一打包就生成了浏览器能认识的文件了,像这些样式呢,他就给你抽离到一个样式文件里边去,对吧?像这个 temperature 里边,代码呢,他就会给你生成为云的函数,给你处理的满满登登啊,你完全不用担心。哎,那我们以后开发就方便了。你看啊,在这里去书写主 键的模板,在这里呢,书写组件的 gs, 最后呢,导出一个组件配置,在这里呢,书写组件的四 ss 就更加舒服了。好,那么接下来呢,我们就把之前的代码改造成这种工程化的结构来吧,没一点 gs 呢,都不用去动它了啊,基本上的代码就这样了。 然后呢, component 里面呢,有一个,之前他搭建工程的时候,给你自动建立了 hello word 给他去掉,然后给他新建一个叫做 starrate, 之前我们玩的不就是个星级评分组件吗,对吧,后缀名写 vu 啊,这里顺便说一下啊,如果说你使用的是 vsco 的开发的话,最好去安装好一个插件叫做 vola 啊,把这个插件安装一下,这个插件呢,能够识别这个点儿 view 的后缀名,它可以支持里面的代码着色好。于是呢,我们把之前的 starrit 的代码呢粘贴到这儿,三块儿嘛,对吧,一个是 temperate, 一个是 script, 一个是 好,之前星级评分的 at 面呢,就写到这,是不是很舒服,对吧,那么这里边呢,就导出一个主线配置哎,这里是不是要写上这么一个 temperature 呢?好,不需要了,我刚刚才说了,这个玩意打包之后就会变成 轮的函数自动编的啊,所以说你这里导出啥也不需要了,因为目前呢,这个组件还没有涉及到任何的界势,如果说你导出的是一个啥也不需要配置的东西的话,你可以省略这个 script 元素去掉了啊, 好,样式呢,样式就写到这里面好,首先呢,导入一个字体图标啊,因为这个组件里边星星用到了字体图标 好,然后呢,粘贴上之前的星级评分的 css 代码,一个高度内具的组件就写完了,这个文件里边包含了星级评分组件里边的所有东西全在里边了。那么之后呢,我要用这个组件,我就不管你里边是咋写的了,直接拿过来就用。比方说 到这个 app 组件里边去使用那个星级评分啊,样式我也不要了,这上面该去掉了。代码呢,跟之前是一样的,导入 compoint 里边的 store rate 好,然后呢?局部注册还是给这个组件取个名字啊? sorry, 好,剩下的事情你们都懂了是吧?模板里边就可以直接使用他了,多来几个吧,好,保存。 代码写完了,我们现在呢,需要运行这一套代码,如何运行呢?这个玩意浏览器是肯定不认识的,那怎么办呢?得打包是吧?通过无忧颗粒搭建的工程呢,要打包使用这个命令叫做无忧颗粒 service build 啊,当然呢,他把它配置成为了一个脚本,所以呢,你可以非常方便的使用 npm 装 build 就可以完成打包了。这些玩意都是工程化的知识哈,不要以为有了脚手架之后,他帮你把构建工具 配置全部帮你搞定了,你就不需要工程化的知识了。那你将来的学习问题一大堆,具体什么问题可以看一下抖音之前我讲的工程化啊。好,打包完成之后啊,我们看一下工程目录是不是新生成了一个,叫做 deste 对吧? destination, 那么这里面就是打包结果,你看,这就是一个纯粹的浏览器,非常喜欢代码, 哎,听没有?然后呢,这里一个 cs 目录,这一个 gs 目录是不是很舒服啊?于是你要做的就是把这个目录里面东西给他运行出来,就完事了 啊,然后优先运行出来,哎,你看这个星级评分不就出来了吗?哎,但是每一次这样运行代码,你恶不恶心啊?你写的代码都得重新打包,然后呢,重新运行那个电子目录。 那么这个时候呢,只要你懂一点工程化,你都应该知道在构建工具里边往往有一个什么开发服务器,叫 defserver, 像我们 vipic 里边就有这个东西,是吧?那么唯有颗粒呢?他又用的是这个 派,所以他里边也带了这个东西,而要启动这个开发服务器呢,他给我们提供了一个命令,叫做色,当然了,你可以把它改成别的名字啊,都无所谓的好。于是呢,你只需要去运行这个 np 装色,在开发阶段,通过这个开发服务器 就可以非常方便的完成开发。开发完成之后再进行用必要的来进行打包,生成一个请求地址,访问这个地址,就可以看到这样的一个结果了。 那么基于微派的各种能力,在 vivo 颗粒里边都能够得到提现,比方说像这更新三几个,当代码变化之后呢,这边的界面会自动刷新 好。那么至此呢,我们又进一步的更改了工程结构,把工程结构变成了我们使用无忧框架来进行开发的完整形态,其实就是无忧加工程化。很多中小型企业呢,直接使用无忧的官方脚售架就 ok 啦, 上了一定规模的企业,或者是做了一些比较复杂的项目呢,可能会定制 vivo 的脚手架,更改里面的一些配置,甚至有可能根本就不使用 vo 的脚手架,自己去开发一个脚手架。那么这些呢,都需要工程化的知识啊,由于我们讲的是没有主见,我也不能确定你之前有没有学过工程化,学到什么程度 我也不能扯远了啊。好,这就是我们目前的工程目录结构,之后呢,我们就会在这个结构上进行阐述和学习。

各位同学大家好,欢迎大家参加十天技能课堂系列,我是主讲老师李彦辉。 今天呢,我们来看一款 vivo 点 gs 的桌面前端 ui 库啊,它是一个前端的主键库,那我们来首先了解一下他的入门信息呢和他的安装方式。好,首先呢先来看一下啊,什么是 amt ui, 他是一套呢为 传统桌面啊,主要是传统桌面准备的基于 vivo 点 js 的前端主键库。那我们先打开他的官网啊,他的官网就在这里啊,网站快速成型工具,我们点主键这里啊就可以了,指南的话我就自己说一说了啊,好, 逐渐这里我们来看一下,好,再打开这里。那我们需要哪些学习基础呢?好,那么,呃,首先呢,我们是他是基于六点啊,可以脚手 架下啊,其实不基于也是可以的,但是我们推荐是基于这个脚手架下,我们去学习和开发啊,所以需要一些基础。 我们之前呢学过两门课程,一个是 v 有点 gs 的核心篇,就是语法篇,那第二个呢,就是工具篇啊,讲到最主要的就是两样,就是他的脚手架和他的陆游啊,如果学习过,我出的啊,第三门课就是威实在, 那效果更佳啊,因为他把前面两个呢做了一个什么,做了一个综合, ok, 好,上面两门课呢啊,两门课呢也是需要基础的啊,那你可以去参考上面课程的第一节课的要求。那我这边就说一下啊, h t m 五 css 加 stay 的对吧。 e s 啊, e c m s pro 的六啊。 ok, 那如果你有后端技术那更好了,如果是纯简单的话啊,就这么多好安装环境呢,我们就不安装, 因为之前都安装好了啊, no 的 gs 的环境和 vivo 点 gs 脚手架等工具即可。好,首先呢我们来看一下他到底是来做什么的, 他是一个前端的啊,优爱库,那我们就来个最简单的,比如说巴特,我们就是个按钮,你看有这么多好,这么多好看的按钮可以提供给你使用。然后呢,他还有布局啊,布局暂时看不出来,要我们真正做项目的时候才能慢慢看出来啊。好,然后我们再 啊日期选择器,哎,这边就是日期选择器,这个呢就是优爱库的哎,这个他的核心所在啊,各种各样方便的工具提供给你使用,我们再找一个啊 啊,通知啊,弹窗,我们点个弹窗,哎,一个弹窗,对吧?然后加载,哎,加载,哎,就这么个东西啊。好了,那这边呢,我就不一个一个去借条了,哎,因为我们都会学 到。好,然后呢我们来开始搭建我们的学习的环境,首先呢我们要创建一个项目,好,在这边我们已经创建了,我们写一个爱丽们, 嗯,这样一歪就可以了,我们点击创建。好,等他创建完毕啊,创建好之后呢,我在这里呢创建一下 vivo, 点 gs 的脚手架。好,怎么创建呢? vivo pro 啊,艾特,然后呢写个格力啊,回车,那让他去安装啊, 稍微等一下,现在最新的版本是四点五点六啊,大家可以升级一下,因为我们讲这个呢,不需要升级啊,好,选择第三个,那我不需要这个啊,我只需要这个陆游就可以了,就陆游和上面第一个啊。然后呢,我们回车,回车的时候要不要这个? 嗯,陆游的地址我们可以玩啊,然后呢选第二个,然后不要保存,嗯,就可以了,那么现在呢,就等他来安装,安装的过程呢,可能花一点时间,可能一分钟,我们稍微暂停一下, 好,我们已经安装完毕了啊,我把暂停又打开了,那在这一块呢,我们来,哎,把它缩放一点啊,把它往这拉一下,这边呢打开哎,这里我们已经把 vivo 点 gs 安装好了,然后我们先进入这个目录啊, nbm 二,先把它运行起来啊,看看他是否正常运行 好,启动一下我们的服务啊,稍微等一下啊,好,他正在哎,然后执行。 然后呢,我们顺利的打开了 home bot, 对吧?很简单啊,这个好,那么下面我们再来看,我们已经安装好脚手架。之后呢,我们要安 装 amtu i, 那在这里他是怎么做的呢?点主键啊,这里就会有第一个安装,这边有这,这边有个命令,我们直接把这个命令复制一下,然后新建一个啊,我们先进到这个目录下去,然后右击,右击,我们粘贴一下, 嗯,复制一份 ctrl v。 有了啊,回车。哎,稍微让他安装一下啊,稍微等一下啊,这个呢,我就不切不切了啊,就让他安装,因为这个呢很快 好,基本上 ok 了啊,九秒钟。装好了。之后呢,我们来在这边的配置文件,我们稍微来看一下啊,配置文件,哎,你们的 ui 啊,二点一点三就已经安装好了,安装好之后呢,我们要测试,第一节课呢,我们要测试他是否真的安装好呢, 那么首先我们再来看一下笔记,好在文档这块呢,写的非常多,然后点快速上手,还有一大堆问题啊,还有一大堆他的注意点,我们暂时先不考虑这么多,我们先把它运行起来,对吧?所以说笔记上我就啊,来个最简单的,把这两个引入进来啊, 把你们的 ui 引入进来,然后把他的 css 引入进来啊,然后意思一下就 ok 了。好,那我们来看一下,在面点 gs 这里,首先第一步,用破 好艾力 mantey pro, 好,这面写上艾力 mat, 哎,直接就有了。然后呢,引破,然后再写个什么呢? 来写一个,哎哎,里面的 ui, 然后杠斜杠啊, l i b 斜杠他这个主题,然后下面一个引带个 css 啊,这样做就 ok 了啊,以后有再有别的 问题我们再做,先做这么多,然后呢?这个呢?红的对吧?啊,把它斜进去,哎,这边怎么回事?好,确定一下啊。 好,然后呢,这边一呃这个 vivo 点 eute, 然后写上 amtey 就搞定了。好,这边就不会有什么哪边没用到,对吧?好,我们关闭掉之后呢,我们再来看。嗯,首先我把这里的 vivo 后面这边打开,把这边呢,我们调成四啊,调成四,把这个呢就去掉,这个去掉的话就什么都没有了。那我现在来一个最简单的啊, 最明显的就是一个疤痕按钮,我们来一个疤痕,比如说成功就是撒个 case, 就这个按钮,那这个按钮我们点开这边的显示代码,他这里呢?哎,有这种写法,根据他的主键来 来写,我们来看怎么写呢?好, el 什么肉就可以了。但是他有没有代码提示呢?因为我们这个 id 编辑工具啊,他的代码提示比较怪异啊,我也是研究了一下,因为 我用 vs 扣的,用习惯了之后呢,再回到这边都有点不太适应了。好,那么他的代码提示是这样子的,先写个兼括号,一页摇,你看是不是就提示了回车,然后呢,你还要闭合一下,就这样子,是这样子的啊,那里面写个一页摇,然后八层,那这样不提示, 那这个呢,就习惯上可能就会有点障碍了啊,那对于这个呢,其实是比较简单的,所以说我个人就觉得无所谓了,就自己写吧,这样也挺好的,对吧,你也要巴特,哎,就自己写对不对?好,那么这边写个什么呢?叫做按钮,然后这边写个太太,写个什么呢? 嗯,打个 case 啊,虽然不提示啊,但是都是简单的单词啊,无所谓了。好,我们在这里呢就已经看到了,是吧,哎,说明我们的 ui 成功加载了,那么从第二节课开始呢,我们就按照他的顺序一个一个讲过去啊,基本上这个顺序呢, 呃,就跟我们学习顺序差不多啊,没什么太大的问题啊,如果有问题的话,我会调整啊,就是这样子的,那么第一节课呢,我们就是把它安装和配置好,那这节课呢,我们就讲到这么多,最后感谢收看本次课程,谢谢大家,再见!

好,接下来的话就是安装项目啊,安装项目这一块啊,为什么要安装这个 note 环境?因为我们前端的话,所有项目都是基于这个 note 开发的,基本上,所以说你必须得安装这个 note 环境啊,安装 note 环境之后你才你才能用这个啊, n p m 这种这样的一个命令。 ok, 我们来呃输入这个命令啊,然后去进行安装,首先我们选择一下文件夹啊,文件夹的话我这边直接选择这个 test 文件啊,然后这边我用这个右击是吧,输入命令或者中端打开 啊,这一块的话,你可以直接啊这个 shift 加右击啊,中单打开也是可以的 啊,然后输入承诺的,看有没有反应,对是有反应的啊,当然最好还是安装这个 get 工具,这个 get 工具还是方便一点, 就这块的工具。然后我们再输入一下啊,输入一下我们的这个命令,这个命令是什么呀?就是安装 v u e 啊, ok, 好,粘贴起来就是我们的命令啊, 这相当于我们安装的是 v u e 的,是一个最新版,也就是 v u e 三。好,这个时候的话我们就要选择一些这个功能啊,就是我们看一下 我们要注意的哪些思想。首先第一个就是啊,这一块是 project name, 就是项目名称啊,比如说我们的项目名称叫做,呃,这个演示嘛, test, 呃, tens 的颜色是吧? tens 是 tens a, 好吧,就是 tens a。 好,这边是这个哈,像 名称,像名称的话我也就叫 text 小 a 啊,那自动生成啊,这个是是否用这个 types griff 啊?磨人的话是不需要使用的,当然这根据自己情况,如果说你对这个呃这个 ts 比较熟悉的话,你可以用这这个 ts 啊,当然我不建议用 ts, 因为 ts 我感觉对我个人来说还是感觉还是有点没有 ts, 因为 ts 显这么舒服 啊,没有那么快方便啊,那默认的话就弄我们直接进行啊,然后这个是呃 gs, 这 x 啊,这个面也不需要支持啊,这是代码教练,我们都不需要。 ok, 然后这边的话,就是啊,是否给页面增加一个路由啊?路由的话肯定是需要的,所以我们要选一下这个 yes, 然后 yes, 选择的话就要注意啊,就是选择 yes 之前必须先按空格啊,这是我们要注意的啊,这个需要坑,这是一个这个这个命令,我们要先按空格,然后再输入 yes 啊,它的有效啊,这样的话我们就可以看到这里啊,我们选择的是 yes 啊,这个是要注意的,因为这一块我,我当初当初的话,这一块我也是卡了,我最少卡了两个小时吧,嗯,每次输他都没反应,比较坑的,但确实我也没看懂这种写法,为什么要加个空格,那才才有效。 ok, 然后我们看下一个啊,这个是啊,这状态啊,这个这个 panel 啊,这个状态状态的话也是需要的啊,就是我们在后面做项目当中,比如说用户登录了呀,是吧,这个程序是否打开了, 哎呀,这都是需要状态的,所以我们按空格输入 ds 状态也是必须要的。然后这个单元测试,单元测试的话,一般我感觉单元测试很激烈,不需要单元测试,特别是做小小项目,根本就不需要单元测试啊,然后这单元测试我们不需要。 ok, 这个是啊, esdint 也是一个 es 的一个检测工具,我们也不需要啊,乱七八糟东西我们都不需要。 ok, 这样的话我们就把这一整个的一个啊,一个 v o e 项目就给安装好了, 安装好之后啊,我们再看一下啊,这边就会告诉我们要要 c d 是吧? text a c d text a 是什么意思啊?其实很简单,我们可以看一下,我们的是当前目录 text a 啊,这是 text a, 也就是说我们这里 它会自动给你创建一个文件夹啊, cd 到 taxa 的话,就相当于我们双击的文件夹,也就是我们进入到这个项目当中来了啊,这是我们的一个 viv 项目,就已经安装好了啊,就已经下载好了,也不还没有安装啊,只下载好了,所以说他们都让你去 cd 一下 啊,我们按 ctrl 加 c 啊,中断一下,我们 cd 加啊 test a, 我们到这个目录来看啊,这个是探视令,当然你也可以直接在这里右击啊,右击是吧,右击也是一样的啊,可以到这来选,选择这个目录 好,然后我们再进行安装。安装命令的话也是很简单啊,安装命令我们 cd 进来之后我们就要安装,安装的话就是这个 install 是吧? n p n p n install 是吧?安装,只有安装了我们才能 启动这个项目。好,我们等待一下,好,等待它安装。 ok 啊,这边安装完了,它上面显示说我们已经下载了一百四十多个包啊,这边多了一个文件夹,可以看出啊,这个 note 啊, models, 对啊,那个文件夹 啊,这是我们所有的插件啊,这就是我们真正的安装好了,安装好之后我们再启动,启动的话也是我们要通过这个命令啊, n p m 让 d v 啊进行启动,可以看一下。 呃,我们继续打开这个命令啊,安装完之后我们 m p n r d e v ok, 这就是我们的一个 v 一项目就启动好了。 这边是我们的地址啊,这个地址的话我们就只需要把它复制一下啊,复制一下,然后用浏览器打开浏览器,我们用浏览器打开一下, ok 啊,这就是我们默认的一个 v u e 项目就安装好了,还是很简单的吧。



好,看一下这边的问题哈,袁老师,我单组件测试这个命令突然运行不起来了,呜呜呜,之前还好好的,大概是什么原因?大概是不用大概了,百分之百确定是版本原因啊,这也是咱们达一老师翻来覆去回答的问题最多的一个。呃,怎么处理呢? 我是万万没有想到,无忧可立,在不改变大版本号的前提下,他居然做了 break update, 这是我万万没想到的。什么叫 break update? 就叫做阶段更新,就是这个一次更新,这一次版本更新会导致之前的代码用不了, 这叫 break update。 按照国际惯例来说,我们的羽翼化版本号不是有三个号码的吗? x 点, x 点这个,这个是不是有三个版本号?这个第一个叫做主版本号,只有主版本号变动的时候才会有 break update, 次要版本变动或者是补丁版本变动都不 不会有 break update, 它都是完全兼容的。但是我没有想到 view 颗粒它在次要版本变动的时候仍然做了 break update 啊。他可能觉得这个东西没有什么太太多人用,所以说他就这样搞了,导致了同学们搞定了。那么这个问题呢,我已经重新录制了一节课,在 view 里边,你只要保证你这个 viewcode 的版本是四点五点二全局安装的版本啊,就可以了,你可以把之前的 viewcode 版本卸载掉,然后用这个版本就 ok 了啊。其实呢,我可以多说几句吧,它是怎么回事呢? 就是以前呢,是用使用这个单组件测试的时候,他启动的是组件,就过去的版本里边啊,他启动的是组件,现在他改了,他启动的是一个 gs, 那个 gs 跟那个魅点 gs 是一样的啊,在 gs 里边去选了一个主电。就是现在的启动入入口电了啊。不能直接启动主电了,要启动一个 gs 啊,就单独去写个 gs 也能搞定啊。呃,我这个东西不是很重要了, 你反正都是做的测试的,你可以把个版本降到四点五点二。关注都已剪辑后的同学打断一下啊,我是袁老师,总听我讲短视频,这回呢来听听我讲的大课。我给大伙呢专门录制了一套大吃课,现在呢免费送给你们。不管你手上现在看的是什么样的资料都应该先停下来 先来看一看我这套大师课。一方面呢,这套课程里边的内容都是前端最核心的知识,其他的知识都是在这个基础上生长出来的,你先掌握好了这个再学啥都事半功倍。而且呢,自此以后你对前端技术的理解不会存在任何的障碍。 另一方面呢,这套课还能够提升你的眼光让你具备分辨好坏的能力。看过大师课之后啊有一些不入流的资料课程博客论坛你就看不上眼了,这种能分辨好坏的能力 也能够为你将来的学习省下不少的时间。所以呢,还没有领到课程的同学赶快抓住免费领取的机会进评论区第一条加入粉丝群然后根据提示领取就可以了。呃然后才啥是外本三点零啊,说外本三点零也说了很多年了啊。这他主要是区块链,区块链技术 呃,但是目前没有一个实际落地的东西。有,但是选不起什么大波浪的,大波浪的东西 没有一个惊世骇俗的产落地,落地产品,所以说目前呢,区块链还在处于一个草币和投机 这么一个阶段,那他到底是不是为了三点零?那是民间的说法,那些搞区块链的,那些搞虚拟货币的,他们玩的东西,他们把它说成是为了三点零这么一个高大上的名词,其实呢,是否能够得到行业的那个认同还存于。
