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脚手架搭建的更多相关文章

  1. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  2. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  3. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  4. vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)

    Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...

  5. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  6. vue cli 框架搭建

    =============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a8 ...

  7. 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

    一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...

  8. 脚手架搭建vue框架

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

  9. vue之cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  10. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

随机推荐

  1. Hibernate利用纯sql

    String hql = "select * from shop where shop.strid in(select strid from moneythreeshop where mon ...

  2. python learning Functional Programming.py

    print(abs(-10)) # 函数可以是变量 f = abs f(-10) def add(x,y,f): return f(x) + f(y) x = -5 y = 6 f = abs # 简 ...

  3. 团队GIT实战总结

    项目要求 组长博客 遇到的困难及解决办法 组员1(组长):王彬 遇到的困难  在团队任务分工的时候没有充分照顾到所有人,导致队员们的工作量不均. 现场编程时间不够 解决办法 在此对组员们表示抱歉,由于 ...

  4. ns3 模拟无线网络通信

    /* -*- Mode:C++; c-file-style:"gnu"; indent-tabs-mode:nil; -*- */ /* * This program is fre ...

  5. 作死实验,删除libc.so.6

    参考https://www.cnblogs.com/fjping0606/p/4551475.html https://www.cnblogs.com/weijing24/p/5890031.html ...

  6. cxVerticalGrid

    cxVerticalGrid can't get values procedure TForm1.Button1Click(Sender: TObject); var i: Integer; lvNa ...

  7. 面试问题总结二(技术能力-PHP)----Ⅰ

    1.你都做过什么项目? 答:第一份实习工作接触的项目是CRM 销售管理系统,一款用JSP语言开发的进销存管理系统.第一份正式工作是一款主打高质量图片社交社区网站项目,“美啦周末”(后改型为”聊会儿”) ...

  8. PHP导出sql文件

    发现自己之前写的php导出sql数据为Excel文件在导出一些数据的时候出现了精度的问题,比如导出身份证号的时候会把后面变成0000.暂时先把这个问题留下,有空去看看到底是什么问题. 写了一个导出sq ...

  9. Linux上的free命令详解-收藏

    解释一下Linux上free命令的输出. 下面是free的运行结果,一共有4行.为了方便说明,我加上了列号.这样可以把free的输出看成一个二维数组FO(Free Output).例如: FO[2][ ...

  10. RTMP、RTSP、HTTP视频协议详解(附:直播流地址、播放软件)