您的位置:首页 > Web前端 > Vue.js

Vue-cli脚手架的安装与使用

2019-02-24 12:57 489 查看

1. Vue-cli脚手架安装,配置vue命令环境

vue-cli依赖于node.js,所以需要先安装node.js
安装好node.js后,测试看是否安装成功!

接下来安装vue-cli命令(npm install vue-cli -g)这种方式安装下载速度非常慢,所以我现在用cnpm安装。首先安装cnpm(npm install -g cnpm

安装好后运行(cnpm install vue-cli -g)命令安装vue

安装好vue后,测试看是否安装成功!
输入命令:vue -v 或者 vue --version

vue-cli提供了几个模板给开发人员用于不同的项目,可以通过命令(vue list)查看,一般用webpack和webpack-simple的比较多,我们用webpack

2. 初始化项目,生成项目模板

命令(vue init webpack vue_demo
运行后会输入一些项目相关配置,如:项目名,作者等…
如下所示:

生成项目ing…

项目基本生成完毕

3. 打开生成的项目目录,安装依赖和运行

进入项目目录,里面的东西就是vue-cli给我们的脚手架(初始化好的目录结构)

打开项目并运行
运行项目的命令(npm run dev

运行成功!

打开浏览器输入:http://localhost:8080 查看效果

如果你的端口被其他项目占用,vue也会用其他端口。

写的有些粗糙,有什么不对的地方还请各位大佬指点一二。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: