vuejs+webpack技术栈(入门篇)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/playboyanta123/article/details/53375658

   目前前端技术更新得实在是太快,各种技术层出不迭,什么前端自动化工具(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编译等等


  

展开阅读全文

没有更多推荐了,返回首页