npm vue ivew vue-cli3

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咋这么丑...