2019-4-10 10:56:20 星期三
学习iview时需要搭建一套node环境, 这里记录下来
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咋这么丑...