vue-cli -- > 项目基本构建的方法
vue-cli -- > 项目基本构建的方法
本文档目的在于让对vue了解比较少的同学,能够快速搭建属于自己的vue项目。(window)
一、构建项目的前提条件
1、确保本机安装了node.js ^6 --> javascript 的服务端的运行环境
2、确保本机安装了npm ^2 --> npm的包的管理工具
注意:如果你装了node.js 和 npm 请检查它们对应的版本号。
1、win + r 打开cmd,键入 node -v 回车
2、键入 npm -v
符合vue的开发环境,我们不多啰嗦直接进入项目构建。
二、构建自己的vue-cli应用
1、因为vue脚手架的一些好用的功能是基于webpack模块的,所以首先你应该全局安装webpack模块(安装成功后应该会出现版本号)
npm install webpack -g //全局安装webpack
webpack -v //检查webpack是否安装成功, 成功即出现版本号。
2、全局安装vue-cli
npm install vue-cli -g
vue -V // 检查vue-cli是否安装成功 成功出现如下提示
3、构建一个名字叫做report的项目
vue init webpack report // 在cmd当前目录下,创建一个名字叫做report的项目
回车后,会出现很多yes/no的选项,这里根据个人需求选择是否安装。在这里个人建议先全部都选择no不安装,后期需要那个模块我们自己安装。这样印象深刻并且能够
学会如何自己配置项目中应用的模块。
注意:在这里最后的 npm install 选择上,这是安装vue-cli基本的包。等待安装结束后。
4、进入项目文件夹,启动项目
cd report // 进入文件夹
npm run dev // 启动项目
最后出现localhost:8080字样便可放入浏览器地址栏中进行访问vue-cli的默认组件
注意:
后面的端口可能不是8080,因为8080是vue-cli默认配置的端口号。如果本机开启了其他服务,webpack会自动检测,并且分配一个新的端口,有可能是8081、
8082。这个不要在意,字节使用就可以了。
个人邮箱:wangweizhangweb@163.com
姓名:王维璋
有问题随时交流,不怕打扰。
最后:
本文档意在与帮助初学者快速构建vue项目,虽没什么技术含量。但不要随意转载,如需转载保存。需署名。谢谢配合。
posted @ 2019-01-08 17:21 王维璋 阅读(...) 评论(...) 编辑 收藏
- vue-cli脚手架构建的项目中引入iconfont图标方法
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- vue-cli构建项目使用 less的方法
- 使用VUE-CLI构建一个项目基本的配置
- vue-cli构建的项目中图片路径以变量形式传入时显示解决办法
- vue-cli构建vue项目
- vue-cli之router基本使用方法详解
- vue-cli构建vue项目
- vue-cli创建的项目,配置多页面的方法
- 通过vue-cli3构建一个SSR应用程序的方法
- vue-cli 构建的项目中如何使用 Less
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- 从nvm安装到vue-cli构建项目
- 基于@vue/cli 3.0 快速构建vue 项目
- 如何在手机端查看vue-cli构建的项目
- webpack+vue2构建vue项目骨架的方法
- vue-cli+webpack项目 修改项目名称的方法
- 使用vue-cli(vue脚手架)快速搭建项目的方法
- vue-cli构建vue项目
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目