怎么安装vue-cli


本文摘自PHP中文网,作者青灯夜游,侵删。

安装方法:1、安装node和npm;2、安装cnpm;3、在目标文件夹下打开终端;4、使用“cnpm install vue-cli -g”命令全局安装vue-cli即可。

本教程操作环境:windows7系统、vue2.9版,该方法适用于所有品牌电脑。

相关推荐:《vue.js教程》

vue-cli安装和使用

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node

1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,在安装的过程中可以根据个人喜好使用淘宝的镜像,但是要先安装cnpm(速度和稳定性都比较好)

由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有需要npm的国内镜像---cnpm,在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org

2、在目标文件夹下打开终端

3、全局安装vue-cli

执行cnpm install vue-cli -g

运行vue查看安装是否成功

4、创建项目

运行vue init webpack(注:模板名称) sell2(注:项目名称)

5、安装依赖

进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件

6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存,所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件

注:webstorm一打开就卡死了,没办法操作文件夹这种情况的解决方法为,首先在文件夹形式下打开删除node-modules文件夹,然后进行阻止检索的方法,然后在重新cnpm install就好*(这种方法需要安装完依赖项先运行一次然后删除node_modules子文件,webstorm打开项目,禁止检索node_ module文件夹,然后在删除该文件夹,重新安装即可)

7、运行项目

1

npm run dev

(注:此时不能用cnpm来运行,必须是npm)

8、将需要的资源放进项目

9、我们需要用到路由功能 所以需要安装vue-router

安装方法:vnpm install vuve-router --save

10、在build/devs-erver.js下编写自定义变量和路由功能

阅读剩余部分

相关阅读 >>

vue.js怎样引入到html中

node+vue怎么实现简单的websocket聊天功能?(代码示例)

如何理解vue中的全局组件和局部组件

vue qs是什么

react和vue的区别及优缺点是什么

在 vue 中使用分页

vue中递归组件的实现方法介绍(附实例:三级菜单)

vue.use怎么用

vue如何动态增加css

vue文件怎么打开

更多相关阅读请进入《vue-cli》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...