webpack+vue+iview使用vue-cli脚手架搭建
1.安装nodejs环境
下载node.js。安装成功后再控制台输入 node -v 出现版本号则,安装成功。
如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经出现版本号,此步骤可以忽略。将安装node的路径剪切,右键我的电脑-->属性-->高级系统环境设置-->环境变量-->找到path环境变量。加上复制的node的安装路径。
2.可以在控制台在输入一下命令,查看是否已经成功的安装了npm npm -v 如果出现版本号说明已经安装成功,
3.下面我们就可以进行,vue 的脚手架的安装了 也就是vue-cli,在控制台输入 npm install -g vue-cli (注意:尽量使用全局安装),等待完成安装即可。
4.我们使用webpake模板生成一个项目 vue init webpack 文件名称,出现如下时显示安装成功

5.安装包依赖 npm install
6.当安装完成后 我们执行,npm run dev 进行运行。如果控制台有出现下面情况说明项目已经启动起来了
浏览器输入localhost:8080时,出现如下的界面:

那么vue我们搭建好了,现在开始集成iview
7.使用脚手架安装iview npm install iview save
8.成功后添加iview-loader加载器 npm install iview-loader --save-dev
webpack+vue+iview使用vue-cli脚手架搭建的更多相关文章
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)
Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- vue cli 框架搭建
=============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a8 ...
- 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
- 脚手架搭建vue框架
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- vue之cli脚手架安装和webpack-simple模板项目生成
ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...
- 1.vue脚手架搭建项目
前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...
随机推荐
- 使你的WebService可以远程调试点击“调用”
默认发布webservice时,只有在本机访问某个方法时可以点击调用,如果有参数时,也可以输入参数值,但是如果是远程访问时,点击进入一个服务时,是不显示“调用”和输入参数框的. 原来web.confi ...
- 听说 —— beta冲刺总结
听说 -- beta冲刺总结 beta冲刺成员名单 姓名 学号 负责方向 个人主页 周龙荣 031402543 前端页面.跳转 http://www.cnblogs.com/ZHOULR/ 李家鹏 0 ...
- Leetcode题库——15.三数之和
@author: ZZQ @software: PyCharm @file: threeSum.py @time: 2018/10/6 19:47 说明:给定一个包含 n 个整数的数组 nums,判断 ...
- DPDK RX / TX Callbacks 源码阅读
这个sample是基于basicfw的.basicfw就是一个网口收到的包立即从另一个网口转发出去,非常简洁明了的程序,可以通过basicfw学习基础的DPDK发包API.RX / TX Callba ...
- SM2
一.介绍 #百度 二.生成密钥对及证书 1.使用gmssl工具 详见gmssl 2.go 版本 详见https://github.com/tjfoc/gmsm 3.java版本 #尚未实现 1.初步使 ...
- thinkphp学习2-控制器
1.定义控制器 一般来说,ThinkPHP的控制器是一个类,而操作则是控制器类的一个公共方法. 控制器通常需要继承系统的Controller类或者其子类,例如,下面定义了一个 \Home\Contro ...
- Gradle入门(5):创建二进制发布版本
在创建了一个实用的应用程序之后,我们可能想将其与他人分享.其中一种方式就是创建一个可以从网站上下载的二进制文件. 这篇教程描述了如何创建一个二进制发布版本,满足以下需求: 二进制发布一定不能使用所谓的 ...
- vue 如何使用scss (转载)
创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init w ...
- Js apply方法详解,及其apply()方法的妙用
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Linux内核0.11 makefile文件说明
# # if you want the ram-disk device, define this to be the # size in blocks. # 如果要使用 RAM 就定义块的大小(注释掉 ...