目前前端技术更新得实在是太快,各种技术层出不迭,什么前端自动化工具(gulp/grunt),前端组件化框架(vuejs,reactjs),前端工程化(这是一套技术思想),前端模块化(seajs,requirejs),简称就是四个‘现代化’。当然这些东西虽然每种都花样很多,但是思想基本是想通的,每种思想学习其一即可,而且建议前端不要一味的去追逐这些新东西,等你项目或者开发需要到这些技术,你再去基于需求驱动学习,那样会来的更快更直接,当然精力无限者例外。今天要说的是vuejs+webpack这套技术栈,这也是目前最火的一套技术栈之一,下面是入门篇,也就是让你知道怎么让一个vuejs的demo在你本地跑起来,我觉得这对初学者来说才是最基本的:
1.安装node环境,这是目前前端技术的基础环境了,大部分技术栈都依赖它,所以必须要了解
当然大部分人肯定是已经安装了的,所以那你就要升级你的node以及npm,确保是最新版本,以免后面使用的时候因为版本低而报各种错;
Node 版本更新,下载指定版本 .msi 文件,安装到历史安装目录,即完成版本更新,当然你也可以下载面安装版,直接到你之前的安装目录替换之前的文件和文件夹就行了(亲测是可以的)。
npm版本更新:npm -g install npm ( 最新稳定版 )或 npm -g install npm@2.9.1 ( 指定版本 )
2.安装vue-cli(这是vuejs出的构建vuejs项目的工具)
指令是:npm install -g vue-cli
3.切换到某个目录,进入cmd,使用vue-cli构建一个最简单版本的helloworld
vue init webpack testvue(最后一个是项目名,可随意取),这个过程会让你输入一些项目信息,你随便输入然后回车就会进入下一步了
4.进入vuejs简历的项目目录:
cd testvue(上一步做完了命令行里面一般会有提示)
5.安装项目所需要的依赖:
npm install
6.运行demo:
npm run dev(这一步是借助node自带的一个web服务把项目跑起来了,这时候浏览器一般会自动启动打开页面,如果没有的话输入localhost:8080,就会进入
helloworld页面)
7.build项目,让其在别的服务器也能跑起来:
npm run build(这时候会在项目里面生成一个dist文件夹,这里面有编译压缩过得html和js以及css,把这个文件夹拷入到比如apche服务器的web目录中,
就可以直接访问了,比如localhost:8888/dist/index.html)
以上是入门基础片,网上有很多成熟项目的demo,用到的技术和依赖可能会更多,比如是es5或者es6写的,就需要babel编译等等