1.我们在C盘里面单独创建一个目录(software)c:\name,安装一些开发工具。(因为默认的安装路径里面可能有空格对命令行工具很不友好。)
2.安装node.js 下载地址:https://nodejs.org/en/(下LTS版本,安装过后就有了node运行环境的npm的包管理器。)
3.配置cnpm. (中国访问npm官方库太慢,用淘宝的镜像),打开cmd命令行工具,执行:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org |
(这里也可以自己下载一个更加强大命令行工具cmder) 下载地址:https://cmder.net/
4.配置Git,打开cmder配置Git的邮箱和用户名。执行:git config --global user.email "**@**.com" |
git config --global user.name "Li Yu" |
为PhpStorm或WebStorm集成Git功能,路径如图: 5开发Vue.js项目,安装vue-cli命令行工具,用于辅助创建vue项目,打开cmder,执行:
cnpm install -g vue-cli |
使用vue-cli创建一个新项目。 执行:
vue init webpack 项目名字 |
进去项目的目录,安装依赖库。
cd 项目名 |
cnpm install |
启动dev server 在浏览器 中预览网页:
npm run dev |
6. 避免WebStorm/PhpStorm打不开项目代码的坑
vue项目的依赖包使用npm来管理,npm读取项目中的package.json来安装依赖包,项目所有的依赖包最后都安装在了项目根目录下的node-modules/文件夹里面。这个目录文件很多,有几万个,第一次打开要扫描文件下所有的文件,并建立索引,方便之后做代码查询和代码跳转。如果项目存在 node-modules/目录,因为文件太多,WebStorm/PhpStorm扫描里面的代码会非常慢,甚至卡死。解决办法是,当新建工程,或者pull新的代码,先不急执行npm install 安装依赖,使用WebStorm/PhpStorm先打开工程之后,再执行npm install 就不会出问题。如果已经npm install安装过了,可以 node-modules移除到工程之外别的目录,打开项目之后再把node_modules移回来。