1.一次vue-cli4项目升级到vite的页面源码经历
2.vue自动生成页面(vue项目怎么生成html页面)
3.å
¬å¸ç¨vueè¿ç¨åçå(大å
¬å¸å¾å°ç¨vue)
一次vue-cli4项目升级到vite的经历
背景
使用vue-cli4的项目,业务写多了之后开发运行和打包都慢了很多,页面源码为了提升开发体验以及更新团队技术框架,页面源码需要升级到更高级的页面源码脚手架上,两种方案:一是页面源码升级到vue-cli5,二是页面源码现货macd kd共振源码升级到最新的vite。
其中第一种方案升级简单,页面源码经过实验,页面源码打包的页面源码速度不升反慢,这可能和项目中的页面源码有依赖以及业务代码有关。
第二种方案升级vite,页面源码经过可行性调查,页面源码升级到vite的页面源码成功率非常高,最后决定从vue-cli4升级到vite,页面源码这是页面源码一个高风险高回报的事情,因为尽管市面上已存在很多升级成功的案列,但是每个项目都不一样,我们的项目也很庞大,依赖很多,并没有%升级成功的把握。而升级成功的回报也很显而易见,开发环境几乎秒运行,开发体验得到了显著提升。
升级前后对比||vue-cli4|vite||---|---|---||开发启动时间|ms|ms||生产打包时间|s|s||打包体积|.6MB|.6MB||运行期间同一代码改动编译时间|ms|瞬时|
生产环境打包时间可能和我们项目中用到了太多vite插件有关系,但开发环境的提升非常显著。
项目状况项目中用到的Vue2,VueCli版本:4.5.,版本更新时间为.5.8,vueCli4的最后版本为4.5.(.3.),依赖的webpack版本为^4.0.0
组件库使用vant,依赖Less预处理器,通过vue.config.js配置设置了less主题色,在webpack仅支持less-loader@5版本以及对应的less版本
业务css预处理器为stylus:"^0..5",对应stylus-loader:"^3.0.2"
进行了多页打包(MPA)
使用了workbox-webpack-plugin插件配置了PWA:WorkboxWebpackPlugin
配置了多个路径映射(alias别名)
指定了文件输出路径以及hash配置
生产环境下关闭productionSourceMap以及css的sourceMap提升打包速度
proxy开启多个代理
用到了.env文件中的环境变量
按照开发规范忽略部分文件后缀以及index.js
移除了preload脚本
期望结果可以使用vite进行开发和打包
仍保留webpack打包功能(因为项目太大,不能保证升级到vite后会不会有问题,所以仍希望webpack原本功能正常运行)
准备工作升级Node版本,vite只支持node及以上,SUPH指标源码公式建议升级到v以上。
安装pnpm工具,pnpm作为更好的npm依赖管理工具,是目前npm和yarn的最好替代品,且有些依赖包使用npm安装时会有异常,使用pnpm安装可解决:pnpm
小项目尝试一键转换升级:wp2vite、webpack-to-vite,这两个工具都提供了一键将webpack项目转成vite的能力,但对于大中型项目,并不可靠。
开始行动1.安装必要依赖pnpm?add?vite-plugin-env-compatible?vite-plugin-html?vite?vite-plugin-vue2?--devvite-plugin-vue2是处理vue2版本代码的插件,如果项目中是vue3,安装的依赖有所不同,请参考webpack-to-vite
2.复制html到根目录,并修改注意是复制,并只改动复制后的html,这样才不会破坏原有webpack功能。
修改复制后的html,增加对应的js文件引用,注意type属性不能少!
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>多页打包(MPA),其他页面的html同样操作,不同html引入对应的js即可。
3.新增vite.config.js文件,开始迁移最重要的配置部分空配置如下:
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })4.修改环境变量环境变量主要面临两个问题:
要兼容webpack和vite的环境变量用法
解决方法:使用vite插件vite-plugin-env-compatible,让vite中可以使用webpack中读取环境变量的方式,再配合envPrefix配置,让vite可以读取到VUE_APP_开头的环境变量:
?pnpm?add?vite-plugin-env-compatible?-D?import?{ ?defineConfig?}?from?'vite'?import?envCompatible?from?'vite-plugin-env-compatible'?export?default?defineConfig({ ?plugins:?[?envCompatible()?],?envPrefix:?['VUE_APP_']?//?很重要?})?//?mian.js测试?console.log(process.env.VUE_APP_UNION_STATS)?console.log(import.meta.env.VUE_APP_UNION_STATS)两个打印都得到了正确的结果,注意:vite中默认只能读取到VITE_开头的环境变量,如果不配置envPrefix,则会导致第二个打印为undefind。
vite.config.js中不能读取到环境变量
vite.config.js是无法直接通过import.meta.env和process.env获取环境变量的,我们需要通过vite的loadEnv获取。
我们需要将vite.config.js的导出对象改为函数:
?import?{ ?defineConfig,loadEnv?}?from?'vite'?export?default?({ ?mode?})?=>?{ ?const?isPro?=?mode?===?'production'?//?我们可以通过mode直接判断当前是不是生产环境,注意mode可以在运行指令中指定:`vite?build?--mode?master`,如果没有指定,vb提高卷源码那默认打包就是production?function?getEnv(key)?{ ?//?定义获取环境变量的方法?return?loadEnv(mode,?process.cwd(),'')[key]?//?第三个参数非常重要,下面有详解?}?return?defineConfig({ ?base:?getEnv('VUE_APP_PUBLICPATH'),?//?读取环境变量?//?...忽略其他代码?})?})loadEnv有三个参数,前两个参数基本固定不变,而第三个参数默认情况下是不需要传的,只有在配置了envPrefix项,读取非VITE_开头的变量时才需要,在loadEnv源码中我们可以看到,第三个参数是prefixes:string|string[]='VITE_',也就是环境变量的前缀,默认是VITE_。
如果你的项目和我一样,读取了VUE_APP_PUBLICPATH这样非VITE_开头环境变量,就在loadEnv的第三个参数传递空字符串即可,这样就能读取到所有的环境变量了。
5.兼容commonjs代码项目中有用到commonjs规范的依赖,比如letmd5=require('js-md5').create(),webpack是基于node开发的,支持require语法,在打包的时候webpack也会正确处理这部分代码,但在vite中不会,所以需要将这部分代码改成importmd5from'js-md5'
项目开发环境下,一些node_modules中的包也会存在commonjs的代码,我们可以通过vite的插件?vite-plugin-commonjs来实现这部分代码的转化,保证开发环境的正常运行。
pnpm?add?@originjs/vite-plugin-commonjs?--dev//?vite.config.js忽略其他代码import?{ ?viteCommonjs?}?from?'@originjs/vite-plugin-commonjs'export?default?({ ?mode?})?=>?{ return?defineConfig({ plugins:?[//?...viteCommonjs()?//?兼容vite中的cjs导入语法]})})6.解决css预处理的问题vite内置了对主流css预处理器的支持(sass/less/stylus),项目使用预处理器时,只需要安装对应预处理依赖即可:
#?.scss?and?.sasspnpm?add?sass?-D#?.lesspnpm?add?stylus?-D#?.styl?and?.styluspnpm?add?stylus?-D比较巧的是,我们项目中用到的Stylus的@import别名的语法和vite冲突,@import'~@/public/stylus/mixins'这样的代码是会报错,一开始我找到了插件,可以帮助我们解决这个问题:vite-plugin-stylus-alias,但是都后面打包的时候发现这个插件有副作用,后面采取了其他方法解决。
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>0<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>1使用这个插件会导致无法生成sourcemap文件,在打包的时候可以看到警告:Sourcemapislikelytobeincorrect:aplugin(vite-plugin-stylus-alias)wasusedtotransformfiles,butdidn'tgenerateasourcemapforthetransformation.Consulttheplugindocumentationforhelp,鉴于插件作者已经很久没有更新,保定到邯郸源码建议能改成相对路径还是直接改,如果引用地方较多,可以定义文件为全局styl文件最新解决方案:一般出现这个报错是因为插件使用了vite的transformapi转换代码,但是return值缺失导致,解决方法:复制插件代码到项目中,在插件transform函数return的结果中,返回map:null,然后再vite.config.js中引用项目中修改后的插件,即可完美解决,如下:文末解决bug有细说
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>2定义stylus全局文件
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>3这里需要注意,官方文档中css-preprocessoroptions写的是使用文件名拓展名作为key,stylus的文件拓展名是styl,但是我使用了stylus作为key并不会有问题,相反使用styl作为key则不生效了,后续这个地方可以留意一下。
在vite源码中,stylus和styl都进行了判断,理论上都可以使用,但目前测试的结果就是styl作为key不生效,可能源码中其他地方还能找到原因。
7.组件库按需导入和定制主题我们项目中用到的组件库是Vant2,该组件库依赖Less,以及通过配置文件来定制组件的主题,在配置中我们需要进行修改:
vue-cli中的主题配置部分如下:
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>4vite中主题配置部分如下:
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>5按需导入项目中按需导入vant组件库,组件可以成功导入,但是组件的样式缺失了,这是因为在webpack中,babel-plugin-import插件帮我们实现了组件的样式导入,在vite中使用?vite-plugin-style-import插件帮我们实现这个功能,不仅vant组件库,其他诸如element、antv等组件库也可以使用这个插件进行按需导入:
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>6<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>.修改alias别名配置,以及忽略文件后缀vite配置别名的方法和vue-cli有所不同,且没有默认的别名,都需要通过配置实现,且vite默认不能忽略文件后缀导入,浏览word网站源码我们也需要通过修改配置来实现:
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>8需要注意extensions配置的顺序,从左到右进行匹配,如果存在同名但类型不同的文件,很可能得到期望外的结果,比如同目录下存在index.js和index.vue,按上面的顺序,import'./index?会优先匹配到index.js文件。这种情况建议补全后缀进行导入。
9.配置前端跨域vite配置跨域和webpack也有出入,需要修改配置
<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>9以上就是几种常见的跨域配置方式,webpack中的devServer改为了server,webpack的proxy中的pathRewrite改成了rewrite,并且类型成为了函数,在函数中返回请求的路径即可。
.多页打包以及打包的其他配置vite在build.rollupOptions配置多页打包,参考rollupOptions,其他配置参考文档
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).配置运行路径base是指项目运行在服务器的哪个路径下,一般通过从环境变量中动态获取。
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).配置EsLintvite中使用vite-plugin-eslint插件实现eslint的检查功能,安装过程中发现vite-plugin-eslint@1.4.0会报错,安装1.3.0版本即可。
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })2import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).使用插件@vitejs/plugin-legacy兼容低版本浏览器plugin-legacy文档
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).配置运行指令import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })5可以在指令中声明mode环境,这个mode在vite.config.js中可以得到,具体可以参考前面4.修改环境变量
保存运行指令npmrunserve开发环境已经可以跑起来了,但是vite的特性是你用到的页面才会进行打包,其他页面没有进行访问,是不会打包的,所以需要进行打包才能知道其他地方改造会不会有问题,打包如果有报错,再解决报错即可。
.解决报错globalisnotdefined
这个错误是在node_modules/buffer/index.js?v=ea7文件中抛出的,我查看了yarn.lock文件,依赖路径为多个vue-cli插件>webpack@4.0.0>node-libs-browser?>buffer
这个是依赖的问题,第一删除node_modules重新安装依赖。第二更换npm工具为pnpm重装依赖,如果仍不行,建议不建议webpack,删除掉webpack相关依赖。
网上还有一种做法是:在window对象上挂载global对象,可作为备选方案。
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })6@import'~@vant/icons/src/encode-woff2.less';报错
这个错误是vant组件库中的icon组件抛出的,vite默认不能使用别名,我们在前面配置了别名,但是配置的是~@指向项目中的src目录,这样vant组件库的这个文件引用就找不到了。
issuesvant
解决方法:针对vant的这个文件,做一个别名,放到第一位,优先进行匹配:
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })7运行vitebuild,css产生了一些警告。
警告分为两种,一是css中的属性拼写错误,诸如:color写成了colo,background写成了backgrounc,属于语法错误,根据警告提示搜索对应样式进行修改即可。
二是一些语法正确,但还不清楚为什么压缩时提示了警告:比如stylus修改scoped样式用的>>>语法,以及background?rgba(0,0,0,0.5)提示Unexpected"rgba("。
Thepackagemayhaveincorrectmain/module/exportsspecifiedinitspackage.json
这个错误是通过npminstall后运行vite指令报错的,用yarn安装一直很正常,原因是node_modules的某个包的package.json定义的main入口路径错了,所以找不到模块导入。
解决方法:针对这个模块,定义别名,指向正确的入口:
import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })8打包后导入函数定义别名后,调用函数报错
import*asminByfrom'lodash.minby'代码报错了,而且只有在生产环境下才产生。
解决方法:暂时去掉别名,这应该和lodash的导出方式modules.export在vite中转化成ES语法的过程有关系。
importminByfrom'lodash.minby'
requireisnotdefine,通过require导入资源报错
前面在步骤5已经用了插件vite-plugin-commonjs转化common.js的代码了,require理应不会报错。
但是require导入资源算是webpack的功能,和js代码不一样,所以导入资源的代码都要进行修改:
require('./images/logo.png')改成importlogofrom'./images/logo.png'
这样的修改可以兼容webpack和vite,这是在现有项目中,改动的地方会达到上百处,非常麻烦。
vue自动生成页面(vue项目怎么生成html页面)
vue技巧:解决网页静态化的问题
我们使用vuecli打包出来的vue页面,只有一个html。不错这确实是spa牛逼的地方。
但是对于seo来说,这也是一个致命缺陷。
那就是,完全没法seo。这货连个实体页面都没有。那就很难受了。
此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入
这里你需要注意一点,你现在需要设置你的route为history模式。当然我们一直是这个模式,之前有人使用hash模式,那个是不可取的。
接着打开webpack.prod.conf.js这个文件在build文件夹中,添加
然后还是这个文件,找到plugins,在里面加入
注意着里面的地址,是生成静态化以后的目录,这里跟你的route地址是对应的。按照你的route来写。
然后重新输入
完成后是这样的
这只是一个治标不治本的解决办法!因为只有route中的页面被生成了静态页面,我们的内容页面是无法生成静态的。那么这该怎么办呢?如果你既想使用vue那简介的语法进行开发,又希望项目能实现cms那样自动生成静态的功能,你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发!
请持续关注龙哥的后续教程!
在vue下面创建新页面并引入样式(图文讲解)
1.在components下面新建一个grid.vue的文件,在文件里放入内容
2.在css里新建一个grid.css文件,把grid.vue需要的样式放进来
3.在router里的index.js里import,import?文件名from文件存放的路径;并在routes下面写好路由
4.在main.js里引入grid.css的样式,import'路径名'
手把手撸vue项目vue欢迎页解析在介绍完简单的项目目录之后,我们对项目自动生成的欢迎页进行讲解(也就是对src目录进行讲解)。
在这个文件中,我们可以进行路由配置,包括子路由等,也可以通过导航守卫进行路由限制。
举个例子:某些页面需要登录,跳转到这些页面的时候,我们就将其进行拦截,跳转到登陆页面去。这部分内容后期会进行讲解。
图中,我们不难看出,默认引入了叫HelloWorld.vue的文件。并在routers中进行了使用。
path:url访问的路径,这里的‘/’表示在的时候进行访问。
name:这个router的名字,跳转时也可通过name来指定跳转到哪个路由中。
component:顾名思义,表示使用的哪个组件。
在vue项目中,组件存放在components文件夹中,这些组件可以通过路由来进行使用,也可以通过组件间的引入来进行使用。
VuePress-Vue驱动的静态网站生成器入门教程VuePress由两部分组成:第一部分是一个极简静态网站生成器(opensnewwindow),它包含由Vue驱动的主题系统和插件API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持Vue及其子项目的文档需求。
每一个由VuePress生成的页面都带有预渲染好的HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。
事实上,一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页应用。如果你以前使用过Vue的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,你甚至可以使用VueDevTools去调试你的自定义主题。
在构建时,我们会为应用创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt(opensnewwindow)的nuxtgenerate命令,以及其他的一些项目,比如Gatsby
1、创建并进入一个新目录
2、使用你喜欢的包管理器进行初始化
3、将VuePress安装为本地依赖
我们已经不再推荐全局安装VuePress
4、创建你的第一篇文档
5、在package.json中添加一些scripts
这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些scripts已经被添加。
6、在本地启动服务器
VuePress会在(opensnewwindow)启动一个热重载的开发服务器。
现在,你应该已经有了一个简单可用的VuePress文档。接下来,了解一下推荐的目录结构和VuePress中的基本配置。
VuePress遵循“约定优于配置”的原则,推荐的目录结构如下:
如果没有任何配置,这个网站将会是非常局限的,用户也无法在你的网站上自由导航。为了更好地自定义你的网站,让我们首先在你的文档目录下创建一个.vuepress目录,所有VuePress相关的文件都将会被放在这里。你的项目结构可能是这样:
一个VuePress网站必要的配置文件是.vuepress/config.js,它应该导出一个JavaScript对象:
对于上述的配置,如果你运行起devserver,你应该能看到一个页面,它包含一个页头,里面包含一个标题和一个搜索框。VuePress内置了基于headers的搜索——它会自动为所有页面的标题、h2和h3构建起一个简单的搜索索引。
你也可以使用YAML(.vuepress/config.yml)或是TOML(.vuepress/config.toml)格式的配置文件。
一个VuePress主题应该负责整个网站的布局和交互细节。在VuePress中,目前自带了一个默认的主题(正是你现在所看到的),它是为技术文档而设计的。同时,默认主题提供了一些选项,让你可以去自定义导航栏(navbar)、侧边栏(sidebar)和首页(homepage)等,
由于VuePress是一个标准的Vue应用,你可以通过创建一个.vuepress/enhanceApp.js文件来做一些应用级别的配置,当该文件存在的时候,会被导入到应用内部。enhanceApp.js应该exportdefault一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的Vue插件、注册全局组件,或者增加额外的路由钩子等:
觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧
å ¬å¸ç¨vueè¿ç¨åçå(å¤§å ¬å¸å¾å°ç¨vue)
vueæå æappè·åçAPP对æ¯
webapp项ç®å·²ç»éè¿vue-cliæ建çèææ¶å好äºï¼ç¶åéè¿webpackæå æä¸ä¸ªé¨ç½²æ件listï¼å¦ä¸ï¼æå¼HBuliderï¼æå¼ç®å½ï¼éæ©è¿ä¸ªlistï¼é¡¹ç®å称èªå·±æ´æ¹ã
vueåuni-appçåºå«å¦ä¸ï¼uni-appå¯ä»¥éè¿æå å®ç°ä¸å¥ä»£ç å¤ç«¯è¿è¡ï¼èvueä¸è¡ãuni-appæèªå¨çæ¡æ¶é¢è½½ï¼å 载页é¢çé度æ´å¿«ï¼vue没æãuniapp使ç¨å°ç¨åºçæ ç¾ï¼vue使ç¨web端çæ ç¾ã
å¯ä»¥çå¢ï¼éè¿ç¬¬ä¸æ¹çæ··åå¼åå·¥å ·é½å¯ä»¥æè¿ä¸ªæå åæAPPã
å¨App端ï¼å¦æ使ç¨vue页é¢ï¼å使ç¨webview渲æãå¦æ使ç¨nvue页é¢ï¼nativevueç缩åï¼ï¼å使ç¨åç渲æãä¸ä¸ªAppä¸å¯ä»¥åæ¶ä½¿ç¨ä¸¤ç§é¡µé¢ï¼æ¯å¦é¦é¡µä½¿ç¨nvueï¼äºçº§é¡µä½¿ç¨vue页é¢ï¼hellouniapp示ä¾å°±æ¯å¦æ¤ã
è¿ç§æ åµåå å¦ä¸ï¼æ ¹æ®æ¥è¯¢ä¸å½ç¼ç¨ç½ä¿¡æ¯æ¾ç¤ºï¼vueçtemplateç¼è¯å¨ï¼vueå°templateç¼è¯æäºrenderfunctionï¼ä½¿å¾å¨æµè§å¨ä¸æ é解ætemplateå符串ï¼è¿å¤§å¹ 度åå°äºvueæå åçä½ç§¯ã
为ä»ä¹å¤§å ¬å¸å¾å°ç¨vue?
1ãå¦æè¿å®¶å ¬å¸åè¯ä½ ï¼ä»ä»¬å°±åªä¼ç¨Vueï¼ä½ è¦å°å¿äºï¼å 为ï¼è¿ç§å ¬å¸ä¸å®å æ¥çåç§å端å°ç½ï¼è¿äºäººæ²¡ç¨è¿å ¶å®ä»»ä½æ¡æ¶ï¼çè³è¿å¿«éå¦ä¹ ä¸é¨æ°çç¼ç¨è¯è¨é½æå°é¾ï¼ä½æ¯è¿ä¸å¦¨ç¢ä»ä»¬æèµ·é®çåºæ¥è¡è¯´å «éã
2ãä¸æ¯ä¸ç¨ï¼ä¹ä¸æ¯Vue驾é©ä¸äºï¼èæ¯Vuexä¸æ¯æä¼è§£æ¹æ¡ãVuexçOptionsAPIéç项ç®çè§æ¨¡åå¤ææ§çå¢é¿ï¼ç»´æ¤çææ¬å¢å ãé 读ææ¬ç¿»åãå没æä¸ç§å¾å¥½çé»è¾å¤ç¨æ¹å¼ãé¢æ¡å¼ä»£ç æ æ³é¿å ã
3ãå 为Vueæ¯ä¸ä¸ªåºäºJavaScriptçæ¡æ¶ï¼å®çç¹æ§å æ¬æ¡æ¶çç®åæ§ï¼æäºéæï¼ç¨æ·å好æ§ï¼è¾å°çéå¶ï¼è¿äºåå å·²ç»å¸®å©Vueä¸AngularåReactç«äºã
4ãç¨æ·ä½éªä¸å¤å¥½ä¸ç®¡å产åè¿æ¯åæå¡ï¼å硬件è¿æ¯å软件ï¼æ¯å¨äºèç½è¿æ¯ä¼ ç»è¡ä¸ï¼ææ ¸å¿æ¯æ¼çæ¯ç¨æ·ä½éªã
5ãé¨é¨ä¹é´çåè°æçä¸ï¼å 为大å项ç®ä¸æ¯ä¸ä¸¤ä¸ªäººï¼ä¸äºä¸ªäººè½å¤å®æçãä¸ä¸ªé¡¹ç®ä¹æ以称为大项ç®æ¯å¨äºå®æ¯å ¬å¸å¤§éé¨é¨åååä½ä¸ç产ç©ãä¹å°±æ¯è¯´ï¼è§£å³äºé¡¹ç®ååçé®é¢ï¼ä½¿ç¨vueåreacté½æ¯å¯ä»¥çã
6ãå½å ç¨vueå¼å项ç®çç¹å«å¤ï¼æ¯ç«ç¨vueä¸æå¿«ï¼å¼åææ¬ä½ã
çµååå°ç®¡çç³»ç»çå端ææ¯æ ---vue1ã该项ç®ä¸»è¦æ¯ä¸ä¸ªçµåçåå°ç®¡çç³»ç»ï¼å¯å®ç°ç®¡çç¨æ·è´¦å·ï¼å³ç»å½ãéåºãç¨æ·ç®¡çãæé管ççï¼åå管çï¼å³åååç±»ãåç±»åæ°ãååä¿¡æ¯ï¼è®¢åä¿¡æ¯ç以åæ°æ®ç»è®¡ã
2ãçµå管çå¹³å°ä¸»è¦ä½¿ç¨vueçWebææ¯å¯¹å ¶è¿è¡ç 究设计ä¸å®ç°ï¼æ¨å¨æ´å é«æã便æ·å°ç®¡çåå°ä¼ å ¥çæ°æ®ï¼ä¸è½å¤å¸®å©ä½¿ç¨è æ´å¥½å°è¿è¡ç¨æ·ï¼åå以å订å管çã
3ãVue.jsæ¯ä¸å¥æ建ç¨æ·çé¢çæ¸è¿å¼æ¡æ¶ï¼Vueéç¨èªä¸åä¸å¢éå¼åç设计ï¼å ¶æ ¸å¿åºåªå ³æ³¨è§å¾å±ï¼æäºä¸æï¼åæ¶vueå®å ¨æè½å驱å¨éç¨åæ件ç»ä»¶åVueçæç³»ç»æ¯æçåºå¼åçå¤æå页åºç¨ã
4ãæ³è¦å°å端Vue+åå°ç®¡çç³»ç»ä¸çº¿ï¼éè¦ä»¥ä¸æ¥éª¤ï¼å°å端Vueç¨åºæå 为éææ件ï¼ä½¿ç¨npmæyarnè¿è¡å½ä»¤ï¼npmrunbuildæyarnbuildãå¨ä½ çæå¡å¨ä¸ï¼å¯ä»¥ä½¿ç¨FTPæSCPçå·¥å ·å°éææ件ä¸ä¼ å°æå¡å¨ã
5ãuni-appï¼uni-appæ¯ä¸ä¸ªä½¿ç¨Vue.jså¼åææå端åºç¨çæ¡æ¶ï¼å¼åè ç¼åä¸å¥ä»£ç ï¼å¯åå¸å°iOSãAndroidãH以ååç§å°ç¨åºï¼å¾®ä¿¡/æ¯ä»å®/ç¾åº¦/头æ¡/QQ/éé/æ·å®ï¼ãå¿«åºç¨çå¤ä¸ªå¹³å°ã
为ä»ä¹æ²¡æ人å¼åvue转åçè¿ç§å ¬å¸çææ¯è´è´£äººå¾å¯è½æ¯ä¸ªå°ç½ï¼è³å°æ¯ä¸ªç²ç®çè·é£è ãä»èªå·±æ¯ä¸ä¼å»ç 究ææ¯çï¼å¬å«äººå¿½æ 就好äºãä½ å»å¸®è¿ç§äººåäºï¼æ³¨å®æ¯ä¸æå¡«åçå½è¿ãè¿ç§å ¬å¸ä¸å®æ²¡æè§èçå¼åæµç¨ï¼å¯è½è¿CIç³»ç»é½æ²¡æã
对äºåä¸å ¬å¸ä¸è¬èµ·æ¥ç产åé½æ¯ä¿¡æ¯ç±»ï¼æ¯å¦ç¥ä¹ãå¾®åãååç±»ï¼å¹¶æ²¡æ太å¤å¯¹åºå±ç¡¬ä»¶çä¾èµçåºç¨ï¼çios+å®å客æ·ã
å¯ä»¥çå¢ï¼éè¿ç¬¬ä¸æ¹çæ··åå¼åå·¥å ·é½å¯ä»¥æè¿ä¸ªæå åæAPPã
APPæ§è½æ¹é¢ï¼åçAppï¼è½å¤ä¸ç§»å¨ç¡¬ä»¶è®¾å¤çåºå±åè½ï¼æ¯å¦ä¸ªäººä¿¡æ¯ï¼æå头以åéåå éå¨ççãç½ç«å¶ä½çAppï¼åªè½ä½¿ç¨æéç移å¨ç¡¬ä»¶è®¾å¤åè½ã
ç¥å度ä½ãvue3ç¨ç人太å°äºæ¯ç±äºç¥å度ä½ï¼vue3æä¾äºæ´å¥½çæ§è½ï¼æ´å°çæç»å ä½ç§¯ï¼æ´å¥½çTSéæï¼ç¨äºå¤ç大è§æ¨¡ç¨ä¾çæ°APIã0çæ¬çvueï¼å¼åå¨æé¿è¾¾ä¸¤å¹´å¤ã
å¶å°ç¢°å°HBuilderè¿ä¸ªå½äººå·¥å ·ï¼è½ç´æ¥å°WebAppï¼HTML+CSS+javascriptï¼ï¼æå æåçå®åAppï¼é£å°±è¯è¯å§Webåºç¨æå æææºAppï¼éç¹èæ¥ï¼æµç ç¨åº¦åè½å®å度å¼å便æ·åº¦ãã
å¤§å ¬å¸å端ä¸è¬ç¨vueè¿æ¯react1ãæ ¹æ®ä¸åæ¡æ¶ä¼ç¹ï¼æ们å¨å®é 项ç®å¼åéåä¸ä¸è¬ä¸å°å项ç®æ们ä¼éæ©ä½¿ç¨Vueï¼å¤§å项ç®ä¼éæ©Reactã
2ãä½ä¸ºä¸ä¸ªä¸ä¸å端ï¼å»ºè®®åæå¦Vueï¼åæåå¦Reactï¼åä¹ï¼å¦æä¹åç´æ¥å¦çReactï¼åä¸è¬ä¸éè¦åå»å¦Vueäºï¼å项ç®ï¼éä¸ä¸ªå°±è¡äºã
3ãé½ç¨ãvueåreactå¨å¤§å ¬å¸ä¸é½å¾å¸¸ç¨ãå¹´Reactå·©åºäºå®ä½ä¸ºå端æ¡æ¶ä¹ççå°ä½ï¼è¿ä¸å¹´ä¸å¯ä»¥çå°å®å¨Web端å移å¨ç«¯çå¿«éæé¿ï¼åæ¶ç¨³ç¨³é¢å äºå®ç主è¦ç«äºå¯¹æAngularã
vueæ ¹æ®åççæ¬å·è¿è¡çæ¬æ§å¶1ãvuecliæ¹esçæ¬éè¿ä»¥ä¸ä¸¤ä¸ªæ¥éª¤å®æãå¸è½½å½åçæ¬ï¼ä½¿ç¨å½ä»¤npmuninstall-g@vue/cliå³å¯ã使ç¨å½ä»¤npmi-g@vue/cli@0.4å®è£ esçæ¬å³å¯ã
2ãå¨Vueè·¯ç±ç³»ç»ä¸å¯ä»¥æ¹åçæ¬å·ï¼åªéå¨é¡¹ç®çpackage.jsonæ件ä¸æ¾å°å段versionï¼ç¶åæ´æ¹å ¶å¼å³å¯ã
3ãæ¤å¤ï¼æ¶é´æ³é常æ¯ä»¥ç§ä¸ºåä½ï¼èçæ¬å·ä¸è½ä»¥ç§ä¸ºåä½ï¼å æ¤éè¦åä¸äºå¤çæè½ç¨æ¶é´æ³å½çæ¬å·ãå¦å¤ï¼ç¨æ¶é´æ³åçæ¬å·ä¸å©äºçæ¬æ§å¶åå¤ä»½ï¼å 为æ¶é´æ³å¯è½ä¼ååï¼è¿æ ·å°±ä¼å¯¹çæ¬æ§å¶äº§çå½±åã
4ãvueï¼4ï¼2vue-template-compilerï¼4ï¼ï¼æ³¨ï¼å¦ä¸æ示çæ¬å·åä¸ºæ ·ä¾ï¼å ·ä½å®ç°è¯·å°ä¼ä¼´ä»¬æ ¹æ®èªå·±ççæ¬å·å¯¹åºï¼ç¶åæ§è¡ï¼npmupdateå°±å¯ä»¥äºã
5ãçæ¬å·å¨package.jsonéæï¼å¦ææå¾ççæ¬å·å°±å®è£ ææ°çï¼æ§è¡npminstallneo-async@latestï¼ææ°çå¯è½ä¸å ¶ä»å ä¸å ¼å®¹ï¼ææ建议åpackage.jsonä¸ä¿æä¸è´ï¼ãå¦å¤installæ¶ï¼å»ºè®®ä½¿ç¨æ·å®éåï¼å¯ä»¥åèè¿ç¯æç« ã
6ãè°ç äºå¾å¤æ¡æ¶å模å¼ï¼æåèªå·±ä¸æ¼è¥¿åæåºæ¥äºè¿ä¹ä¸ä¸ªç©æãæå¡ç«¯æ¯«æ çé®ä½¿ç¨nodeï¼ä½¿ç¨typescriptå¯ä»¥ææçå¨ç¼ç åæ¶æ¥éï¼å¼ºç±»åè¯è¨åæå¡ç«¯æ¯«æ ååã
2024-12-23 07:312911人浏览
2024-12-23 06:492422人浏览
2024-12-23 06:46255人浏览
2024-12-23 06:03463人浏览
2024-12-23 05:471678人浏览
2024-12-23 05:38870人浏览
中国消费者报南宁讯(李韦记者顾艳伟)疫情就是命令,防控就是责任。广西区柳州市市场监管局充分发挥质量技术服务支撑效能,仅用30小时,成功解决该市一企业的应急口罩技术、生产和安全难题,在病毒肆虐之时,为打
與其讓許多一圓購屋夢的人,在資訊不對稱的誤導中,成為幫忙「抬高房價」的一員,還真的不如與讀者一起共同釐清市場上的似是而非迷思。
事关报复以色列 伊朗伊斯兰革命卫队最新表态2024-08-21 12:25:00评论:字体大小 T T T伊朗伊斯兰革命卫队发言人纳伊尼当地时间20日表示,伊朗不会就以色列杀害巴勒斯坦伊斯兰抵抗运动(