如何用vue-cli快速搭建一个vue项目
2019-05-22 21:18
716 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Ferbc/article/details/90249954
如何用vue-cli快速搭建一个vue项目
vue-cli是vue的脚手架。脚手架就是工地上为了保证各施工过程顺利进行而搭设的工作平台,vue-cli用来快速搭建一个vue项目。
1.下载Node.js
node.js是一个环境。下载这个环境后我们就可以npm包管理器,去下载很多别人写好的包。http://nodejs.cn/
2.创建一个文件夹,使用vs code打开该文件夹
我在桌面创建一个vuetest文件夹,然后用vs code打开该文件夹
3.安装vue-cli。
ctrl 加 ~键打开终端,输入npm -v 查看node.js是否安装成功,如下图:
输入npm install -g vue-cli,全局安装vue-cli,如下图:
待安装完成后,可以输入vue -V(注意这个V是大写),查看是否安装成功,如下图:
4.创建vue项目
1.vue init webpack project(你的项目名称)
2.之后vue会配置一些文件,可以一路回车确认。在出现ESlint(这是检查语法规则的,才开始学习vue项目时可以关闭)。
5.cd 进入你的项目名称的文件夹,运行项目
在项目初始化好后
输入cd test
然后输入npm run dev,如下图
6.成功生成项目
成功生成项目就可以打开浏览器,输入http://localhost:8080
就会出现vue的欢迎界面,如下图:
相关文章推荐
- vue-cli(vue脚手架)快速搭建前端项目——Vue系列博客一
- Vue-cli快速搭建项目
- vue-用Vue-cli从零开始搭建一个Vue项目
- vue2.0项目快速搭建工具——vue-cli
- 快速搭建Vue-cli项目
- 使用Vue-cli快速搭建项目
- 基于Vue-cli 快速搭建项目
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
- 基于Vue-cli快速搭建项目的完整步骤
- 快速搭建一个Vue项目的步骤
- 如何快速搭建一个CakePHP项目
- vue-cli + webpack + sass 搭建一个工程化项目
- 使用 vue-cli + element-ui 快速搭建项目
- 使用vue-cli搭建一个vue项目
- 详解基于Vue-cli搭建的项目如何和后台交互
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- vue-cli快速搭建vue项目并上传github
- 【Vue】如何使用脚本架工具vue-cli快速创建vue项目
- 如何快速搭建一个angular项目环境
- 使用vue脚手架(vue-cli)搭建一个项目详解