vue + iview 前端项目构建

项目前端使用vue + iview ui完成以下为步骤

1. 安装vue、node.js、webpack、npm 请自行参照官网操作
2. 通过vue-cli 创建vue项目

• 通过vue命令创建项目，会在当前目录下创建文件夹（项目名称）以及项目

// vue init webpack 'you project name' 
D:\vue_study>vue init webpack iplatforms

  A newer version of vue-cli is available.

  latest:    2.9.6
  installed: 2.9.3

? Project name (iplatforms)
//当出现以上情况为项目构建成功，但尚未创建本地任务，需要进行选择，可以一路回车下去，也可进行选择
# Project initialization finished!
# ========================

To get started:

  cd iplatforms
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
//此时项目构建完成

• 安装需要用到的组件，在项目创建时的选择已经包含了route组件，该组件为核心组件。本项目使用iview ui组件时也需要进行安装，我们使用npm命令（也可以使用阿里的cnpm ）

$ npm install iview --save

完成后需要在代码中进行显示引入，涉及代码文件
main.js 路径一般为

D:\vue_study\iplatforms\src\main.js

//main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';//新增
import 'iview/dist/styles/iview.css';//新增

Vue.use(VueRouter);
Vue.use(iView);//新增

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

3. 此时的项目就可以执行了,启动命令在项目构建完成后已有提示，可以看上面回顾一下

cd iplatforms//进行到项目根路径
npm run dev//执行命令，dev为环境参数，现在只有本地环境，暂时不讲环境的切换

编译完成后根据控制台打印的地址进行访问即可

 DONE  Compiled successfully in 8663ms                                                                                     15:24:52

 I  Your application is running here: http://localhost:8080

以上内容完成后，简单的框架就搭建好了，此时可以在项目构建后自动生成的HelloWorld.vue 中使用iview标签就能看到效果了。

//HelloWorld.vue
<Button type="primary" shape="circle" icon="ios-search"></Button>

大致粗糙的加工算是完成了，不过我们还没有涉及到组件之间的通信、路由切换、http请求（axios）等工作，学习还在继续，道阻且长，但我们会负重前行