npm安装淘宝的cnpm并安装使用vue-cli

Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.

安装流程

首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。

使用node命令窗口，输入

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

 

 安装好cnpm以后，因为安装Vue需要npm的版本大于3.0.0，所以我们要升级一下，输入下面的命令

cnpm install cnpm -g

如果不能使用cnpm安装模块可能是因为没有设置系统变量path的路径：（把cnpm所在路径添加到系统变量的path中）

 

参考链接：https://www.cnblogs.com/yominhi/p/7039795.html

然后使用cnpm安装vue

cnpm install vue

 

cnpm安装vue-cli

cnpm install vue-cli

 

查看已安装的模块

dir node_modules

 

可以看到vue和vue-cli模块已安装

 

指定一个目录存放我们的项目（以下填文件夹名称），以该文件夹名称来调用下面的命令（该目录最好跟node-modules同级，方便查找）

vue init webpack "cwh_vue"

效果：

过程：

成功以后，我们进入项目所在目录

cd "项目所在文件夹"即

cd "cwh_vue"

 

 然后在该目录下输入命令

cnpm install 

 

cnpm run dev

以后只需要cd到该目录，且cnpm run dev 启动服务即可在浏览器访问 

 成功了~

 

 

进入浏览器，输入localhost:8081会展示下面的页面

 

 

进入cwh_vue文件夹可以查看该目录下的文件，主要的文件有：

我们开发的目录是在src，其中包含下面的目录

 

快速引入vue-cli的方式

参考链接：

http://www.php.cn/js-tutorial-398885.html            https://www.cnblogs.com/tielemao/p/9372234.html#%E5%AE%89%E8%A3%85vue-cli