node+webpack+vue 起步

在Vue的官方文档里,讲到了以加载vue.js的方式使用Vue框架,但是没有讲到如何搭配node+webpack搭建前端工程,对新手来说会很迷茫。本篇就讲解如何从零开始搭建node+webpack+vue工程。

1.安装node

官网中文版网站都可以下载,最好下最新版,除非有其它的原因。下载后直接安装就行,或者按官方的文档或查网上资料安装。

安装完成后,会包含node和npm两个应用,输入node -v和npm -v 查看对应的版本号。

继续下面的步骤之前,建议先安装淘宝镜像,因为直接访问国外的速度慢,用镜像地址会快很多。

1.1安装淘宝镜像

npm install -g cnpm –registry=https://registry.npm.taobao.org

安装淘宝镜像后,会发现多了一个命令cnpm,要走镜像通道,下面的安装步骤中就要使用cnpm命令替代npm。

2.安装webpack

使用npm安装webpack。

npm install webpack

或用淘宝镜像

cnpm install webpack

有些资料里,命令中还带有 -g,带不带的区别是:使用 -g 安装,webpack是全局的;不使用 -g 则是此node单独使用。

官方不推荐使用全局安装(带 -g),因为全局安装会导致项目中的webpack锁定到某个版本,在使用不同webpack版本的项目中,可能会导致构建失败。参考官方文档

3.安装Vue和Vue-cli

安装vue

npm install vue

cnpm install vue

安装vue-cli

npm install vue-cli

cnpm install vue-cli

至此,需要的环境都安装好了,接下来是如何创建一个demo工程。

4.创建demo工程

4.1新建一个工程文件夹

在任意自己喜欢的盘里新建一个工程文件夹,本篇新建了E:\vue-demo

4.2创建工程

cd 到E:\vue-demo,输入

vue init webpack demo

其中demo是工程名。执行这条命令后,会有一些提示输入:项目名称、项目描述、作者、是否使用vue-router、是否使用测试工具等等,这些完全根据各人的需求来定。

完成后,demo文件夹里包含了一个demo程序,可以直接用。

4.3安装依赖包

cd到E:\vue-demo\demo,输入

npm install

开始安装工程必需的依赖包。

4.4运行项目

npm run dev

运行项目,在浏览器中打开地址可以看到demo程序的页面。

4.5打包生产环境程序

npm run build

会产生一个dist文件夹,里面是可以发布到生产环境的程序。

 


发表评论

电子邮件地址不会被公开。 必填项已用*标注