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 ...
随机推荐
- centos6 安装图形化界面
1.首先进行光盘的挂载,注意光盘挂载时不会自动建立目录的,所以需要自己建立目录 mkdir /mnt/cdrom mount /dev/cdrom /mnt/cdrom #dev目录为设备目录 2.更 ...
- POJ 2151 Check the difficulty of problems 概率dp+01背包
题目链接: http://poj.org/problem?id=2151 Check the difficulty of problems Time Limit: 2000MSMemory Limit ...
- gdb调试器学习链接
首先要带 -g 选项用gcc编译 常用指令:http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/gdb.html#gdb 带main的命令行参 ...
- Java 线程间通讯
/* 线程间通讯: 多个线程在处理同一资源,但是任务却不同. */ package com.cwcec.test; class Input implements Runnable { Resource ...
- angularJS1笔记-(20)-模块化加载机制seajs
SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制. 与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而 ...
- Akka系列---什么是Actor
本文已.Net语法为主,同时写有Scala及Java实现代码 严肃的说,演员是一个广泛的概念,作为外行人我对Actor 模型的定义: Actor是一个系统中参与者的虚拟人物,Actor与Actor之间 ...
- 弱智python小游戏猜数字
from random import randintnum = randint(0,100)print("Guess what I think:?")bingo = Falsewh ...
- [转贴] IPSEC From 知乎
作者:埃文科技链接:https://zhuanlan.zhihu.com/p/44874772来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 认识IPSec IPSec ...
- DispatcherServlet的url mapping为“/”时,对根路径访问的处理
背景 众所周知,Tomcat的Default Servlet的servlet-mapping为 <servlet-mapping> <servlet-name>default& ...
- Shell脚本创建Nginx的upstream及location配置文件
#!/bin/sh ##################################################### # Name: create_nginx_conf.sh # Versi ...