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

原文地址:https://www.cnblogs.com/xiangxinhouse/p/8531157.html

时间: 2024-10-08 00:17:58

webpack+vue+iview使用vue-cli脚手架搭建的相关文章

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

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

在windows下用脚手架搭建vue环境

做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架 3.命令为:cnpm install -g vue-cli,回车,等待安装 安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了. 4.紧接着,就该创建项目了,自己找一个合适的地方,新建一个项目文件夹,根据自己的需要

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

一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project,终端定位到该项目下 4,初始化项目 vue init webpack-simple 会让你进行该项目的一些基本设置,如下图 5,安装项目依赖 npm install 6,启动项目 npm run dev 可以看到终端提示成功 在浏览器上打开localhost:8080/#/可以看到如下图所示,说明

vue.cli脚手架初次使用图文教程

vue.cli脚手架初次使用图文教程 我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了.在youtube上看了一vue的相关教程,还是需要实操的. 好像安装过npm -v 发现已经安装了5.6.0 需要安装然后使用 cnpm 安装 vue-cli 和 webpack 安装代码:npm install -g vue-cli 一.生成项目 首先需要在命令行中进入到项目目录,然后输入: vue init webpack vue-testone p.p1

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目)

1.Vue.cli   脚手架 全局安装 cli npm install --global vue-cli 查看安装结果 vue -V 创建基于webpack的名为myindex的新项目 vue init webpack myindex 切换到项目 cd myindex 安装依赖 npm install 起飞 npm run dev 原文地址:https://www.cnblogs.com/chydream/p/10513192.html

【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g @vue/cli 创建webpack项目 vue init webpack my-app 运行 cd my-app npm run dev 按照提示,在浏览器打开http://localhost:8082/,效果如下: 安装状态管理vuex npm install vuex --save-dev 目

vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记

ps: 基于Vue2.0 npm的vue-cli脚手架 在vue-router中路由路径的简写代码: 点击打开项目 > build > webpack.base.conf.js 找到webpack.base.conf.js文件修改即可  值得注意的是,修改了alias下的引用路径后,要重启项目(npm run dev),否则将会报错 function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports

用vue快速开发app的脚手架工具

前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本文最大特点: webpack4 多页面 跨域Proxy代理 VConsole移动端调试,手机上的开发者工具 es6/es7 babel 转换 项目地址 GitHub 使用手册 MogoH5+ 是一个 vue 多页面脚手架工具,结合 H5+可以快速开发安卓与苹果 APP. 即使不适用 Hbuilder

使用VUE+iView+.Net Core上传图片

我们直接进入主题,使用VS2017开发工具 首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起  我这里呢就叫做Upload了 ok ! 然后我们再创建一个控制器 IndexController 代码如下 要知道上传图片都是通过HTTP去请求,服务端从request中读取 public class PicData { public string Msg { get; set; } } [HttpPost] public async Task<boo