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也会用其他端口。
写的有些粗糙,有什么不对的地方还请各位大佬指点一二。
相关文章推荐
- 不全局安装vue-cli使用vue脚手架
- vue-cli脚手架安装和使用
- 使用npm安装vue脚手架cli或者angular-cli时出错的解决方法
- 使用vue-cli脚手架
- Vue-cli脚手架安装
- vue-cli 脚手架 安装
- vue脚手架vue-cli的学习使用教程
- 在vue-cli脚手架中使用axios时遇到的坑
- vue-cli 3.0安装和使用
- vue-cli脚手架安装教程2017
- 使用vue-cli脚手架搭建项目
- 初学vue2 之 使用vue脚手架(vue-cli)搭建项目模板并打包
- vue-cli搭建脚手架(是需要有一定基础的,不包括node等安装)
- vue-cli脚手架一键安装vue项目步骤
- VUE+cli(脚手架安装步骤)以及生成的文件
- vue的开始:脚手架vue-cli的安装
- Vue-cli 脚手架的安装
- 【Vue】window下 ,vue-cli 脚手架安装
- Vue—九天磨一剑之es6模块规范,webpack,vue-cli脚手架的使用
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]