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

搭建vue开发环境。

 

选择对应版本，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

完成之后，我们就可以使用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、安装项目所需依赖，进入项目中：

npm install

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

9、进入项目目录文件夹（my-project）中，就可以使用vue进行开发啦
10、使用npm run dev，便可以打开本地服务器实时查看效果（localhost:8080）
如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js

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

11、初始效果

12，退出监听，可以直接Ctrl+C，选择Y。
参考：https://www.cnblogs.com/guoyinglichong/p/8278467.html    http://www.jb51.net/article/113890.htm
--------------------- 
作者：昌子的前端之路 
来源：CSDN 
原文：https://blog.csdn.net/weixin_38047955/article/details/80287137 
版权声明：本文为博主原创文章，转载请附上博文链接！