vue开发环境配置(一)

1、安装node.js,用node -v查看node版本号,用npm -v 查看npm版本号。

把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确。

如果安装的是旧版本的 npm,可以通过 npm 命令来升级。

sudo npm install npm -g #linux
npm install npm -g  # windows

可以看到升级之后,再次执行 npm -v 查看版本已经升级到 6.4.0 了。

菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html

2、安装webpack,-g 表示全局安装。在命令行中运行命令 npm install webpack -g。

 菜鸟学堂:http://www.runoob.com/w3cnote/webpack-tutorial.html

2、安装vue-cli脚手架。在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

淘宝镜像

因为 npm 使用的是国外中央仓库,有时候下载速度比较“喜人”,就像 Maven 有国内镜像一样,npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像,安装成功后 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g 。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Yarn

Yarn 是 Facebook 发布的 node.js 包管理器,它比 npm 更快、更高效,可以使用 Yarn 替代 npm 。

如果你安装了node,就安装了npm,可以使用下面的命令来安装:

npm i yarn -g --verbose

npm官方源访问速度实在不敢恭维,建议使用之前切换为淘宝镜像,在yarn安装完毕之后执行如下指令:

yarn config set registry https://registry.npm.taobao.org

到此为止我们就可以在项目中像使用npm一样使用yarn了。

使用 Yarn 跟 npm 差别不大,具体命令关系如下:

npm install  => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

3、初始化项目。在目录下运行 vue init webpack vuetest

4、安装项目依赖。cd到项目文件夹(vuetest文件夹),然后运行命令 npm install ,等待安装。安装完成之后,会在我们的项目目录vuetest文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

5、运行项目。在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

原文出处:https://www.cnblogs.com/xifengxiaoma/ 
自己整理记录。

原文地址:https://www.cnblogs.com/windok/p/10202898.html