window系统中配置Vue的开发环境

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移回来。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值