作为一个前端的菜鸟同学,之间也没学过什么框架,目前公司做项目,所用到的webpack+node.js+vue。
首先,关于node的环境部署方面,建议官网安装node.js,最好不要安装非稳定版的版本或者是低版本的,因为会在项目开发阶段产生一些未知,而且不必要的bug。
node安装步骤:1.安装node直接按照步骤一步步安装,没有什么特殊的地方,安装成功之后,按快捷键"系统+r",进入命令行(cmd),输入命令node -v(注意node后面空格哦)查看是否安装成功,并且查看版本号。
2.在node安装主目录下新建node_global和node_cache两个文件夹。
命令行输入npm config set cache "C:\Program Files\nodejs\node_cache(作为缓存的包)以及npm config set prefix "C:\Program Files\nodejs\node_global(执行此命令成功后在它的目录下会出现以下东西,当然我的里面可能已经有很多配置了的文件)。
进入计算机,右键属性,查看高级系统设置,进入环境变量对话框,在‘系统变量’下新建NODE_PATH,输入C:\Program Files\nodejs\node_global\node_modules(此步骤相当关键,选择的是你安装node.js的路径,此举例安装在C盘)。然后再将‘用户变量’中的PATH修改为C:\Program Files\nodejs\node_global\。
3.大家可能会疑惑,npm 是从哪儿冒出来的,npm是你在安装node的时候直接和它一起安装好的,这个毋庸置疑。npm是包管理器,通过它我们可以安装各种的依赖包,由于npm是国外的资源,所以在用的过程中可能出现卡顿情况,所以我建议使用国内的淘宝镜像。快捷键进入命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org下载淘宝镜像,之后就用cnpm代替npm使用。
接下来我们就随便建一个项目玩玩儿看。(1)进入cmd命令行(如果发现无法安装依赖包,就选择以管理员权限运行)输入 cnpm install webpack –g(-g是全局的意思)和cnpm install vue-cli –g(vue-cli是一个官方发布的vue.js项目脚手架,可以用它快速的创建vue项目)。(2)进入想创建项目的文件夹,这里我们以桌面(desktop)为例,首先命令行输入cd desktop,接着vue init webpack vueproject(注意项目名称一般不写中文)。然后cd vueproject进入我们的项目包,接着cnpm install和cnpm run dev,你会发现会在浏览器的某个端口打开一个页面。如下
证明我们部署完成。