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 ...
随机推荐
- Hibernate利用纯sql
String hql = "select * from shop where shop.strid in(select strid from moneythreeshop where mon ...
- 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 # 简 ...
- 团队GIT实战总结
项目要求 组长博客 遇到的困难及解决办法 组员1(组长):王彬 遇到的困难 在团队任务分工的时候没有充分照顾到所有人,导致队员们的工作量不均. 现场编程时间不够 解决办法 在此对组员们表示抱歉,由于 ...
- ns3 模拟无线网络通信
/* -*- Mode:C++; c-file-style:"gnu"; indent-tabs-mode:nil; -*- */ /* * This program is fre ...
- 作死实验,删除libc.so.6
参考https://www.cnblogs.com/fjping0606/p/4551475.html https://www.cnblogs.com/weijing24/p/5890031.html ...
- cxVerticalGrid
cxVerticalGrid can't get values procedure TForm1.Button1Click(Sender: TObject); var i: Integer; lvNa ...
- 面试问题总结二(技术能力-PHP)----Ⅰ
1.你都做过什么项目? 答:第一份实习工作接触的项目是CRM 销售管理系统,一款用JSP语言开发的进销存管理系统.第一份正式工作是一款主打高质量图片社交社区网站项目,“美啦周末”(后改型为”聊会儿”) ...
- PHP导出sql文件
发现自己之前写的php导出sql数据为Excel文件在导出一些数据的时候出现了精度的问题,比如导出身份证号的时候会把后面变成0000.暂时先把这个问题留下,有空去看看到底是什么问题. 写了一个导出sq ...
- Linux上的free命令详解-收藏
解释一下Linux上free命令的输出. 下面是free的运行结果,一共有4行.为了方便说明,我加上了列号.这样可以把free的输出看成一个二维数组FO(Free Output).例如: FO[2][ ...
- RTMP、RTSP、HTTP视频协议详解(附:直播流地址、播放软件)