金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > cli3脚手架的陈设以至利用,大学专科学生自学

原标题:cli3脚手架的陈设以至利用,大学专科学生自学

浏览次数:126 时间:2019-11-11

最后

大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand

先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了。13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学了。
退学后我也迷茫,大专都没有毕业,我真的不知道我能干什么,我在纠结着我能做什么。所以辍学后我一段时间,我想去找工作,因为我比较沉默寡言,不是很会说话,我不适合去应聘做业务。我想应聘做技术的,可是处处碰壁。
一次偶然的机会,我才听到html5这个行业。那天我去新华书店,在计算机分类那边想找本书学习。后来有个女孩子走过来,问我是不是读计算机的,有没有兴趣学习html5,然后给我介绍了一下html5现在的火热情况,告诉我学html5多么的有前景,给我了一份传单,html5培训的广告。听了她的介绍,我心里痒痒的,确实我很想去学会一门自己的技术,靠自己的双手吃饭。
回家后,我就上网查了下html5,确实是当今比较热门的行业,也是比较好找工作的,工资也是相对比较高。我就下决心想学html5了。于是我去找html5培训的相关信息,说真的,我也很迷茫,我不知道培训是否真的能像他们宣传的那样好,所以我就想了解一段时间再做打算。
后来,我在百度知道看到一篇让我很鼓舞的文章是一个html5高手介绍没有基础的朋友怎么自学入门学html5,文章写的很好,包含了如何学习,该怎么学习。他提到一个方法就是看视频,因为看书实在太枯燥和费解的,很多我们也看不懂。这点我真的很认同,我自己看书往往看不了几页。
我在想,为什么别人都能自学成才,我也可以的!我要相信自己,所以我就想自学,如果实在学不会我再去培训。
主意一定,我就去搜索html5的视频,虽然零星找到一些html5的视频,但是都不系统,我是想找一个能够告诉我该怎么学的视频,一套从入门到精通的视频,一个比较完整的资料,最好能有老师教,不懂可以请教的。
后来我又找到一份很好的视频,是在求知讲堂推出的一份视频《零基础html5就业班》,网址:http://www.qiuzhijiangtang.com/html5.html。里面的教程还不错,很完整。
下面介绍下我的学习流程,希望对和我一样完全没有基础的朋友有所帮助。
下载他们课程,我就开始学习了,由于我没有什么基础,我就从最简单的web前端基础(html css php基础 MYSQL)视频教程学起,话说简单,其实我还是很多不懂的,只要重复多看几遍,就能看懂。web前端基础我差不多学了一个月,接下来我就学了前端高级程序设计(JavaScript jQuery Ajax),差不多也就三个礼拜。我每天都在不停的写一些简单的代码,这样二个月后我基本掌握了html5的全部基础。
接下来开始学习html5高级课程大型网站架构,移动app开发和NodeJS全栈开发,老师幽默风趣而又轻松的课堂教课,使我发现原来学习html5并不是一件很难的事情。之前我把html5基础学得还不错,到了到了html5高级部分,我觉不又不是很难,可能老师太牛了,他能把复杂的问题讲的比较通俗易懂,有些难点的地方我还是连续看了五六次,把他弄懂。每天下午6点下班后,吃了饭,马上跑回家。看视频,买了几本笔记本。当时,为了编程还花几百元了台二手的台式电脑,配置一般,但编程是足够的。一边看视频,一边记笔记,把重点都记下来,还一边跟着老师敲代码,为了能尽早学会html5。每天都坚持学5-6个小时。经常学到晚上一点多才睡觉。星期六,日不用上班,每天7点多起床,学到晚上11,12点。那段时间特别辛苦,特别累。在学习html5的三个多月里,除了吃饭睡觉工作,剩余的时间都在学习,因为我知道自己的计算机基础不是很好,也没有学过什么计算机,相对于那些科班的人来说我要比他们付出更多的努力。我只能咬紧牙关,坚持下去,我不能放弃,我要完成我的梦想,我要让我的家人过上好日子。终于三个多月后我把html5教程里的内容和项目都学完了,在学项目的过程中我发现项目特别重要,他能把你学过的知识全部联系起来,能更好的理解你所学的知识。还有学习过程中,动手很重要,要经常跟着老师动手敲,动手吧,跟着做,一行一行的跟着敲,再试着加一些自己的功能,按照自己的思路敲一些代码,收获远比干听大的多。 如果遇到暂时对于一些思路不能理解的,动手写,先写代码,慢慢你就会懂了。
于是我就到51job疯狂的投简历,因为我学历的问题,专科没有毕业,说真的,大公司没有人会要我,所以我投的都是民营的小公司,我希望自己的努力有所回报。没有想过几天过后,就有面试了,但是第一次面试我失败了,虽然我自认为笔试很好,因为我之前做了准备,但是他们的要求比较严格,需要有一年的项目经验,所以我没有被选中。
后来陆续面试了几家公司,终于功夫不负有心人。我终于面试上的,是在闵行的一家民营的企业,公司规模比较小,我的职务是html5开发程序员,但我也比较满足,开的工资是4500一个月,虽然我知道在上海4500只能过温饱的生活,但是我想我足够了。我至少不用每天都要靠父母养,我自己也能养活自己的。我想只要我继续努力,我工资一定会翻倍的。
把本文写出来,希望能让和我一样的没有基础的朋友有信心,其实我们没有必要自卑,我们不比别人笨,只要我们肯努力,我们一样会成功。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • style="color: #ff0000">通过 @vue/cli 搭建交互式的项目脚手架。
  • style="color: #ff0000">通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具。
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • style="color: #ff0000">可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
    • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject

自己发布的react小插件

------传送门------

  1. assets目录:图片 1 放置静态文件,例如:图片,js,svg的js等等啊,这个目录下的文件在生产环境下会被webpack copy
  2. components目录:放置公用vue组件页面
  3. styles目录:博主新增,放置重写reset.css以及阿里矢量图字体iconfont.css用
  4. views目录:博主用作放大模块。登录页,首页,注册页等等。

创建library

  • 完整代码
  • 核心代码为
    output: {
        path: DIST_PATH,
        publicPath: "",
        chunkFilename: "[name].js",
        filename: "testPlugin.js",
        libraryTarget: 'umd',//将你的 library 暴露为所有的模块定义下都可运行的方式
        library: 'testPlugin'
    },
  • 打包出来后我们会得到一个testPlugin.js,这就是我们自己的三方库。

    平台项目中使用

  • 项目中设置externals,目的是使自己项目不会重复打包引入的库

    externals: {
        testPlugin:"testPlugin",
    },
  • 项目引入
<!--index.html-->
<script src="testPlugin.js"></script>

//index.js
import testPlugin from 'testPlugin';
console.log(testPlugin);
  • 项目打包好
  • 将testPlugin库丢入打包好的dist中
  • 会发现平台项目已经成功引入库
  • 这样会发现只有打包好dist再丢入库才可以看到效果,平时开发环境下怎么办呢,可以使用copy-webpack-plugin,及将静态的文件夹自动拷贝到dist
const copyWebpackPlugin = require('copy-webpack-plugin');

    plugins: [
        new copyWebpackPlugin([{
            from:__dirname+'/src/static',//打包的静态资源目录地址
            to:'./static' //打包到dist下面的static
        }]),
    ...
    ]
  • 然后只需要改改index.html的引入地址
<script src="static/plugin/testPlugin/testPlugin.js"></script>

  

发布npm包

上面的方法的优点是:如果兄弟部门的三方库变了,只需要他们把打包好的库文件给我们,我们丢进去替换掉以前的就可以了,我们自己并不需要重新打包。

那发布npm包呢?自己没事又摸索了一波,并成功发布了一个可以对文本插入表情的react小插件。
------传送门------

首先,你要有一个nodejs环境

最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现。

 

发布准备

  • 自己的项目
  • 去npm官网,注册账号。
  • 给自己的npm包想个名字,并通过搜索验证是否没有被占用

    ### 改写项目webpack配置

  • 核心,同上面的创建library一样

  • 生产环境配置webpack.config.prod.js
//webpack.config.prod.js  
    entry: {
        component: ['./src/component/Expression/Expression.js']
    },
    output: {
        path: DIST_PATH,
        filename: '[name].js',
        publicPath: "/dist/",
        libraryTarget: 'umd',
        library: 'expression'
    },
    externals: {
        'react': 'react',//因为引入的肯定是react项目,所以不需要再将react打包进npm包
        'react-dom': 'react-dom'
    },
  • 开发环境配置webpack.config.dev.js
//webpack.config.dev.js
    entry: {
        app: ['./src/index.js'],
        component: ['./src/component/Expression/Expression.js']
    },
  • 这样设置之后打包出来只有一个component.js,所以需要修改package的main
  • 修改package.json
  "main": "dist/component.js",
  • package的其他设置

    • 另外package里面的name就是你包的名字
    • version是版本号
    • main是入口文件
    • description是描述
    • repository是线上git地址
    • keywords是关键字,比较重要,别人可以通过这个搜索到你的包
    • author是作者

      ### 做完这些就可以发布了

  • npm login

    • 会让你输入账号,密码,邮箱,然后就登陆了
  • 登录成功会出现以下提示信息:Logged in as simbawu on https://registry.npmjs.org/.
    • 注意:如果不是这个,而是我们的其他镜像比如淘宝的,需要先切换回来,否则提交不起npm config set registry https://registry.npmjs.org/,然后再次npm login。
  • npm publish发布
    • 若出现包名和版本号则发布成功
      图片 2

接下来就是创建一个vue的项目了,使用下面命令:

                      

图片 3

  • 不知各位童鞋有没有发现博主比你们多了一个vue.config.js文件木有,这个文件更不得了啦。我们前端独立开发有个跨域问题,之前vue-cli2的proxy-table等配置在vue-cli3中哪里配置呢?
    // vue.config.js
    module.exports = {
        // 选项...
        baseUrl:"./",
        outputDir:"dist",
        assetsDir:"assets",
        indexPath:"index.html",
        filenameHashing:true,
        pages:undefined,
        lintOnSave:true,
        runtimeCompiler:false,
        transpileDependencies:[],
        productionSourceMap:false,
        crossorigin:undefined,
        integrity:false,
        devServer:{//代理
            port:8086,
            proxy:'http://192.168.255.201:8082'
        }
    }
    

 

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:cli3脚手架的陈设以至利用,大学专科学生自学

关键词:

上一篇:没有了

下一篇:没有了