vue-cli搭建vue项目

 1、vue-cli介绍

vue-cli是一个基于nodeJs、用于快速搭建vue项目的 脚手架。

2、vue-cli安装、更新

由于npm安装比较慢，这里先安装cnpm，全局化安装，命令如下：

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

 

可以使用 cnpm-v   查看安装是否成功

cnpm-v

全局安装 vue-cli ，在命令提示窗口执行：

安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）：

cnpm install -g vue-cli 

更新： 

cnpm update vue-cli

查看安装成功否（有版本号就是成功,V大写）

vue -V

查看npm注册表里vue-cli版本号：

cnpm view vue-cli

3、vue-cli 使用

安装过webpack 、vue-cli后，可以开始搭建vue项目： 

用法： vue init <template-name> <project-name>

template-name:
    . webpack
    . webpack-simple  // 一个简单webpack+vue-loader的模板，不包含其他功能。
    . browserify     //  一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
    . browserify-simple  // 一个简单Browserify+vueify的模板，不包含其他功能。
    . pwa           // 基于webpack模板的vue-cli的PWA模板
    . simple      //  一个最简单的单页应用模板   

常用的就是webpack了，模板之间的不同 

vue init webpack <Project Name>

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。

 

4、项目完成

//运行
npm run dev
//打包
npm run build

 

---

 

参考：

1、npm 和 cnpm 区别

 https://blog.csdn.net/jack_bob/article/details/80644376

2、使用vue-cli（vue脚手架）快速搭建项目

https://www.jianshu.com/p/1ee1c410dc67

3、vue-cli2.x搭建vue

https://www.liangzl.com/get-article-detail-17930.html

4、https://blog.csdn.net/xiaoyangerbani/article/details/80735310

5、https://www.cnblogs.com/liaoanran/p/8042893.html

如果您喜欢编程，或者您需要网站开发、app、小程序等等。。可以加入我们qq群：333530575。