我各位哥的友链:

大哥:emin.ink;二哥:ashtwo;三哥:pealipala.cn;

信息展示

昵称:aliveto 邮箱:some_body@foxmail.com

vue-cli 3.0

1.前言

时间过得很快,自己在前端磕磕绊绊的这一年多里,成长了不少,了解到了很多以往触及不到的东西。现在终于也算是赶上了程序员的潮流,接触到了前端比较热门三大框架之一的Vue。刚接触这个,一脸爽,带着比较激动的心情去涉猎它的领域。没想到也是磕磕绊绊 ,半走半爬的在学。现在就分享一下这个过程。

2.前端框架

它是一套解决的方案,你用特殊的规则去写代码,使代码更加的高效、便捷。当用原生js,jq无法满足日益增长得需求时,所谓的框架就运营而生。

前端框架可以保持UI与状态同步(用原生的JS是很难做到这一点)。框架有几个比较显著的特点:(1)都基于组件化(2)都有第三方成熟的组件库(3)都对单页面引用比较友好(4)都有一个强大的社区(5)都有浏览器插件可以dubugging

原生JS实现UI与状态同步的问题:(1)用原生JS代码去创建UI可读性差,很多地方用定义UI(2)状态改变是需要手动的去更新视图,(3)可读性差 ,代码很脆弱(出错率高).

3.三大框架

Vue (尤雨希) 国内较受欢迎,React(Facebook),Angular(谷歌)。三大框架各种有各自的优缺点,感兴趣的可以自己去查资料。

4.Vue这货

可谓是历尽千辛万苦,总于接触到这货(在前端程序员中听起来很高逼格的东西)。刚开始学,和大家一样开始撸语法,规则(就是这么一成不变)。语法可看官方文档Vue

vue-cli3.0

当学完基本语法后,接触到了脚手架(就是一些配置环境,交给脚手架来帮我们配。比如打包webpack,eslint等)。

安装Vue-cli3.0

节点版本要求:Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0+)。您可以使用nvmnvm-windows在同一台计算机上管理多个版本的Node

安装步骤:

  • 你电脑得先有Node环境,node下载
  • 若有装Vue-cli 2.x版本的要先卸掉:npm uninstall  vue-cli -g
  • 开始安装vue-cli3.x版本,先全局安装:npm install @vue/cli -g     vue –version
  • 在桌面快速创建一个项目:cd Desktop     vue create vue-test(项目名)
  • 会进入了一些选项,选择自己需要的包或者用默认的配置
  • 创建成功后,进入项目运行:npm run serve  打开相应的端口就可以看到一个自带的项目页

苦逼的百度:

  • 上线的vue-cli项目,要进行打包:运行 npm run build
  • dist 下的文件夹打开index.html 一脸白(哇靠这怎么回事没东西)
  • 不要慌,就一顿百度,,,,,
  • 在vue-cli3.0的版本中,其原本的思想是零配置,将vue-cli2.x构建出来的项目少了几个配置文件,被综合进默认配置。
  • 可以自己建一个文件名字:vue.config.js配置文件,加上
    module.exports = {baseUrl:’./’,} index.html就可以在本地访问,放服务器上也行
  • 打开发现图标(favicon.con)没啦!!!!!!!
  • 在生成的默认文件中加上
    <link type=”favicon” rel=”shortcut icon” href=”./favicon.ico”/>

5.vue-cli3.0

这货还是得去详细的要去看官网 vue-cli3.0 

vue.config.js 配置文件  vue.config.js

强大的图形化界面:在项目文件夹在运行:vue ui (在图形化界面可以进行相应的操作,还可以创建新的项目)