技多不压身,也刚好最近工作需要,进军前端Vue领域,以此做一个自我学习记录(工作所迫)。
工欲善其事,必先利其器。首先需要环境:
1.node.js环境(npm包管理器)
2.Vue-cli 脚手架构建工具
3.cnpm npm的淘宝镜像
安装node.js
从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了,若版本不同可以问度娘。
安装成功,文件夹结构如下,并在上面安装过程中已自动配置了环境变量和安装好了npm包,此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:
OK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。
安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。
安装vue-cli脚手架构建工具
在命令行中运行命令 cnpm install -g vue-cli ,然后等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目;
npm路径设置
设置npm的默认安装路径,和缓存路径
// 设置npm安装程序时的默认位置
npm config set prefix "D:\Program Files\nodejs\X64\node_global"
// 设置npm安装程序时的缓存位置
npm config set cache "D:\Program Files\nodejs\X64\node_cache"
然后在把D:\Program Files\nodejs\X64\node_global\node_modules路径添加到环境变量PATH中。
安装webpack和vue-cli脚手架
在命令行中执行下列两个命令,进行安装。
npm install webpack -g
npm install vue-cli -g
vue项目测试
1、打开命令行,进入到希望创建vue测试项目的路径,然后在命令行中执行下列命令,进行项目创建。
vue init webpack vue_test //其中vue_test为项目名称
2、在命令行中进入到项目路径,然后执行npm install命令,安装项目需要的依赖。
3、然后执行npm run dev命令,运行项目。
4. 浏览器访问 http://localhost:8080