2019-4-10 10:56:20 星期三

学习iview时需要搭建一套node环境, 这里记录下来

1. 下载安装nodejs  //自带了npm包管理器

2. 设置npm的全局配置: 全局包默认安装路径, 全局缓存路径

3. npm全局安装 vue-cli 3 // 可以创建默认的项目目录和文件, 比如包目录node_modules, 插件目录plugins, 源代码目录src, 以及package.json等省的手动创建了

4. npm全局安装 vue cli server //他也属于vue-cli, 是用来创建服务器的, 可以通过在本地浏览器访问localhost:8080来执行本地的js/HTML代码

5. 通过vue-cli 创建项目的通用目录(最好是在windows自带的cmd命令窗口中执行命令): 
vue create helloworld //vue-cli的命令是vue,  这个命令会在当前文件夹中创建一个文件夹helloworld并创建出一些子文件夹和文件, 创建之前会有一些交互, 让你选择配置项, 使用默认的配置就好了

6. npm install iview --save //进入上一步创建好的 helloworld 文件夹, 并执行这个命令, 把iveiw安装到本地的node_modules中

7. vue add vue-cli-plugin-iview //安装iview官方的vue-cli3插件, 这个命令会修改main.js, 在当前的项目中通过引入iview插件来间接引入iview, 这个过程也会有交互, 让你选择是不是引入iview全部的包, 选择语言等 (也可以使用vue add iview命令, 这俩是一样的)

8. npm run serve //启动服务, 会有提示, 按照提示在浏览器中访问localhost:8080就可以访问默认的欢迎页面了

访问 localhost:8080

另:

yarn //跟npm是同一个作用, 命令比npm简单, 运行速度,下载速度比npm快, 说是下载的包跟npm是同一个源

工具性质的包, 比如 vue-cli webpack 是需要全局安装的

依赖性质的包, 比如 需要在代码中require的包 应该是安装在当前项目中的

使用iview的一个布局组件

目前默认的加载路径是这样的:  public/index.html-> src/main.js ->src/App.vue->components/HelloWorld.vue ,  我们改写app.vue, 让其只加载iview的一个布局组件

1. 安装vue-router: vue add @vue/router

2. 从iview官网的布局(layout)中拷贝一段布局代码, 存放到项目中的src/views中, 命名为layout.vue

3. 改写App.vue

 <template>
<div id="app">
<layout msg="this is layout!" /> //这里渲染
</div>
</template> <script>
import layout from './views/layout.vue' //这里加载 export default {
name: 'app',
components: {
layout
}
} </script>

4. 修改App.vue同级目录下的router.js, 将默认路由指向layout组件

 import Vue from 'vue'
import Router from 'vue-router'
import layout from './views/layout.vue' //这里加载 Vue.use(Router) export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/', //设为默认访问页面
name: 'layout',
component: layout
}
]
})

5. 启动服务器: npm run serve, 在浏览器里访问  http://localhost:8080/

原来带有vue logo的欢迎页面就变成这个样子了, over.

感觉iview响应式layout咋这么丑...

npm vue ivew vue-cli3的更多相关文章

  1. 使用npm安装配置vue

    npm安装很慢(国外服务器),所以一般推荐使用npm淘宝镜像cnpm,先安装下cnpm: npm install -g cnpm --registry=https://registry.npm.tao ...

  2. 如何发布一个npm包(基于vue)

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

  3. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

  4. npm上发布vue插件

    1.初始化项目 vue init webpack-simple XXXXX(此处为插件名) 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无 ...

  5. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  6. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  7. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  8. Vue 项目 Vue + restfulframework

    Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...

  9. 【vue】vue +element 搭建项目,组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

随机推荐

  1. selenium中隐式等待和显示等待的区别

    Selenium显示等待和隐式等待的区别1.selenium的显示等待原理:显示等待,就是明确的要等到某个元素的出现或者是某个元素的可点击等条件,等不到,就一直等,除非在规定的时间之内都没找到,那么久 ...

  2. Vue 环境搭建(win10)

    1.安装node node官网安装地址 推荐安装稳定版本(LTS)以及安装路径为系统盘(C) 查看node安装成功否 注释:以下命令使用 命令提示符(管理员)权限,win10 对user权限的限制了访 ...

  3. codeforces 792A-D

    先刷前四题,剩下的有空补. 792A New Bus Route 题意:给出x 轴上的n 个点,问两个点之间的最短距离是多少,有多少个最短距离. 思路:排序后遍历. 代码: #include<s ...

  4. mysql 索引中的USING BTREE 的意义

    索引是在存储引擎中实现的,因此每种存储引擎的索引都不一定完全相同,并且每种存储引擎也不一定支持所有索引类型. 根据存储引擎定义每个表的最大索引数和最大索引长度.所有存储引擎支持每个表至少16个索引,总 ...

  5. LVS实现负载均衡安装配置详解

    =========实践LVS/NAT模式========== 1.实验环境 三台服务器,一台作为 director,两台作为 real server,director 有一个外网网卡(172.16.2 ...

  6. Spring Boot环境下出现No operations allowed after connection close错误

    一个基于springcloud的微服务项目,详细配置: SpringCloud + SpringMVC+SpringData JPA+ MySql+Postgresql 其中项目配置了多数据源,前期开 ...

  7. nodejs 实现跨域

    1.nodejs let http = require('http'); http.createServer((req,res) => { res.setHeader("Access- ...

  8. const命令

    一.基本用法 声明一个只读的常量,这个值不会变. const声明常量与let一样,不可重复声明. 二.本质(我困惑的地方) const实际上保证的并不是变量的值不可以改动,而是变量指向的内存地址不可改 ...

  9. [ffmpeg] 多输入滤波同步方式(framesync)

    滤波也不总是单一的输入,也存在对多个输入流进行滤波的需求,最常见的就是对视频添加可视水印,水印的组成通常为原视频以及作为水印的图片或者小动画,在ffmpeg中可以使用overlay滤波器进行水印添加. ...

  10. BZOJ 2733 永无乡

    splay启发式合并 启发式合并其实就是把集合数量小的合并到集合数量大的里去. 怎么合并呢,直接一个一个插入就行了.. 用并查集维护连通性,find(i)可以找到所在splay的编号 这题好像还可以合 ...