vue之安装nodejs安装npm安装cpnm安装vue-cli脚手架 - 好文

搭建vue开发环境。

选择对应版本，https://nodejs.org/en/download/ <https://nodejs.org/en/download/>

安装过程：下一步路径：（我的D:\Develop\nodejs）下一步就好

安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。是因为以后在执行类似：npm install express
[-g]（后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】
打开cmd输入如下命令
npm config set prefix "D:\Develop\nodejs\node_global" npm config set cache
"D:\Develop\nodejs\node_cache"

接下来点击我的电脑，属性，高级系统设置

1.新建系统变量
输入NODE_PATH 输入D:\Develop\nodejs;D:\Develop\nodejs\node_global\node_modules
（node安装地址跟自定义地址用;分开）
2.修改用户变量path
%NODE_PATH%;D:\Develop\nodejs\node_global (加%NODE_PATH%是为了防止 cmd找不到node报错）
然后保存，对....

3、基于nodejs，利用淘宝npm镜像安装相关依赖。

由于国内使用npm会很慢，这里推荐使用淘宝nmp镜像打开cmd

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

完成之后，我们就可以使用cnpm代替npm来安装依赖包了。

到这里测试下node cnpm有没有问题： node -v cnpm -v

ps:解决cnpm不是外部命令：

之前安装npm的时候，配置过node_modules和node_cache。所以去nodejs的目录下去找cnpm装哪个文件夹去了。

我的是D:\software\nodeJS\node_cache

本文件夹下打开cmd 运行cnpm -v

ok，现在去配置系统环境path，把cnpm安装路径加入path里，如下图。

ok到这里问题就解决了，可以直接win+r打开cmd 跑下cnpm -v ，楼主是没有问题的。

4、为什么安装vue-cli脚手架---为了生成vue工程模板

安装全局vue-cli脚手架，用于帮助搭建所需要的模板框架输入 cnpm install -g vue-cli

安装完成之后
输入vue测试一下

出现了vue信息说明表示成功
用vue-cli构建项目

查看vue版本vue -V 这个V是大写的不让会报错

5.打包工具webpack 中文网址：https://www.webpackjs.com/ 最近也在研究这东西感觉逼格很高

6.创建项目

（1）本地创建目录

（2）cmd 打开本地，目录E盘下www里的fristvue 注：正确的命令格式是：cd/d E:\www\firstvue

下面这张图是默认地址的截图：

? Project name one 一般直接回车 ? Project description A Vue.js project 项目说明 ? Author
wxj 开发者 ? Vue build standalone 默认回车 ? Install vue-router? Yes 个人建议Y ? Use
ESLint to lint your code? No 是否启用eslint检测规则，个人建议不使用 ? Set up unit tests No
是否创建单元测试 ? Setup e2e tests with Nightwatch? No ? Should we run `npm install`
for you after the project has been created? (recommended) npm
7、项目建立完成后，目录结构如下：

8、安装项目所需依赖，进入项目中：

? <http://www.jb51.net/article/113890.htm#>

1

npm install

完成后，会发现项目目录下多出一个node_modules文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

9、进入项目目录文件夹（my-project）中，就可以使用vue进行开发啦

10、使用npm run dev，便可以打开本地服务器实时查看效果（localhost:8080）

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

<http://files.jb51.net/file_images/article/201705/2017051714072416.png>

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css
文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

11、初始效果

<http://files.jb51.net/file_images/article/201705/2017051714072517.png>

12，退出监听，可以直接Ctrl+C，选择Y。

参考：https://www.cnblogs.com/guoyinglichong/p/8278467.html
http://www.jb51.net/article/113890.htm

热门工具换一换