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. 20172319 2018.04.01-04.11 《Java程序设计》第5周学习总结

    20172319 2018.04.01-04.11 <Java程序设计>第5周学习总结 目录 教材学习内容总结 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考试错 ...

  2. 冲刺One之站立会议8 /2015-5-21

    今天我们把聊天界面做了优化和改进,主要实现了聊天的功能.显示了正在进行通信的成员列表,和当前状态,是否连通和正常通信,大体完成了预期的目标. 燃尽图8

  3. Servlet 3.0 对异步处理的支持

    Servlet 3.0 实现了对异步处理的支持 通过利用注解@WebServlet(urlPatterns="/AServlet" AysnsSupported=true) 让后n ...

  4. BufferedWriter与BufferedRead --------------------------Test2

    package com.test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; ...

  5. 封装,策略,Asp换脸

    封装.策略 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...

  6. Git的基本使用方法和安装&心得体会(使用git命令行)

    这是补发的,使用命令行操作的. (1)选择本地repository的路径 找到后点鼠标右键,选择git bash here. (2) clone到本地 在命令行输入 git clone ADDRESS ...

  7. 图论 Kruskal算法 并查集

    #include<iostream> #include<cstring> #include<string> #include<cstdio> #incl ...

  8. 由于MDK5.0A没有STM32F103程序错误 stm32f10x.h(298): error: #67: expected a "}"

    转自:http://blog.163.com/lby147612@126/blog/static/17041045220150130438428/ 由于MDK4.72A没有STM32F030,所以升级 ...

  9. mybati内sql查询语句在两个日期内

    装载自: http://blog.csdn.net/u010442302/article/details/72902441?locationNum=9&fps=1   <select i ...

  10. 蜗牛慢慢爬 LeetCode 36.Valid Sudoku [Difficulty: Medium]

    题目 Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...