VUE从零开始系列(安装脚手架),呆萌小白上手VUE

VUE从零开始系列(安装脚手架),呆萌小白上手VUE

技术杂谈小彩虹2021-09-23 18:42:28190A+A-

第一章 安装脚手架

前言

前端是个大杂烩,各种技术、框架层出不穷,从pc端到移动端,从前端到后端,从web到桌面应用,乃至原生安卓及ios。 可以说js在手,天下我有(手动滑稽)。

背景

说实话做了几年前端,在前一阵儿我还是觉得,管你什么框架,什么模块化的,老夫就用jquery,整那些花里胡哨的有啥用,我能实现需求就ok!哼哼,但是当我真开始接触到VUE的时候,WTF?还能这么写?开发起来简直不要太流畅啊!不用操作dom,只关心数据层,从接口拿到数据,更新下data,剩下的就不用你操心了。

介绍

接下来我就把我从jquery过渡到VUE的历程分享下,希望能帮助刚入坑的你,相信在看我这篇文章之前,你应该也看过不少关于VUE的资料了,但是大部分只是概念+简单的片段,估计你跟我一样都是跟着敲完以后还是一脸懵逼。所以我决定自己动手写一个我自己能看懂的,应该大部分人也能看懂的文档吧。。

(一)安装nodejs

需要nodejs的版本最少8.9.4及以上(很重要),具体怎么安装我就不讲了,这类教程网上一大把,别忘了npm的淘宝镜像源。想看自己的node版本是多少的话,就打开命令行输入node -v

(二)安装webpack

还是打开命令行,输入npm install webpack -g,意思就是全局安装webpack,这样以后就不用每次新建一个项目都得重新装webpack了。完成之后输入webpack -v看下,如果出现下图:

接着输入y回车(感谢@傻梦兽 提醒,4.0以上版本的webpack需要安装webpack-cli,才能运行,抱歉疏忽了),继续输入 webpack -v,如果出现版本号,就安装成功了

(三)安装VUE脚手架

因为是从0开始的,建议大家还是直接从脚手架开始吧,如果自己搭建的话,光是新建各种文件夹就已经头大了,何况还得自己配置webpack。继续在命令行输入npm install vue-cli -g,完成之后老规矩,输入vue -V查看是否安装成功,注意-V是大写。

以上几步,已经准备好了我们需要的环境,接下来开始进入开发阶段

  1. 随便新建一个文件夹,打开后在文件夹空白处按住shift+鼠标右键,点击在此处打开命令窗口,输入vue init webpack test,这里的test是指项目名称,你可以自己起名字,但是别用中文。之后一直回车,注意:? Use ESLint to lint your code? (Y/n)看到这一行的时候建议输入n,这是一个es6语法检测器,如果开启的话你得严格按照es6规则写代码,稍有不注意就会报错。
    到这里就基本建好了。 此时你会发现刚才新建的文件夹里多出了好多东西:
  2. 在刚才打开的命令行中,输入cd test,就是进入你刚才新建的目录里,你的文件夹叫啥,你就cd啥
  3. 继续输入npm install,会自动安装你需要的各种依赖
  4. 完成之后开始让项目跑起来,输入npm run dev,运行成功在浏览器里打开http://localhost:8080,看到这个画面,就代表你已经成功了

结语

别着急,才刚开始,这个只是安装及运行起来你的项目,后续章节我会继续由浅入深的写下去,想看的可以关注我,今天先下班了。。

所有章节

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们