随着vue.js越来越火爆,更多的项目都用到vue进行开发,在实际的开发项目中如何搭建开发脚手架呢,今天跟大家分享一下首先先给大家介绍几个基本概念。
需要了解的知识

  1. Html
  2. Css
  3. Javascripts
  4. Node.js环境(npm包管理工具)
  5. Webpack自动化构建工具

npm/cnpm/yarn概念

  • 使用npm安装插件:命令提示符执行npm install 。(ps.新版本的nodejs里面自带有npm安装插件,所以不用再另外下载和安装)
  • npm (node package manager) 是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) 。
  • cnpm 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,淘宝团队的一个完整npmjs.org
    镜像,你可以用此代替官方版本。
  • yarm也是个包管理器,是facebook发布的一款取代npm的包管理工具。

安装nodejs

去官网根据自己电脑的配置下载对应的安装包。

npm手动安装python2环境 npm安装及环境配置_安装插件


然后完成nodejs的安装

npm手动安装python2环境 npm安装及环境配置_vue_02


接下来打开对应的安装目录,在地址栏输入cmd进入命令提示符界面。这时候可以检查是否安装成功。

npm手动安装python2环境 npm安装及环境配置_vue_03


输入node -v,npm -v查看是否安装成功,如果安装成功则显示版本号,如果没有安装成功请用上述操作进行安装。

npm手动安装python2环境 npm安装及环境配置_安装插件_04

环境配置(非必须)

这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install 模块名 [-g] 的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

  1. 我安装的文件夹下创建node_global及node_cache这两个文件夹。
  2. 创建完两个空文件夹之后,打开cmd命令窗口,输入:
这里后面的路径是你的安装路径
npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"
  1. 此电脑——右键——属性——高级系统设置——高级——环境变量——点击系统变量下的新建按钮如下图:

npm手动安装python2环境 npm安装及环境配置_vue_05


输入路径名,将【用户变量】下的【Path】修改为node_global所在路径。

npm手动安装python2环境 npm安装及环境配置_环境配置_06


npm手动安装python2环境 npm安装及环境配置_nodejs_07


完成配置,下面进行测试:

npm手动安装python2环境 npm安装及环境配置_nodejs_08


到这一步环境配置就完成了。