springboot + vue + iview 1.创建vue+iview项目 mac版

以前已经安装过node.js，所以这次直接打开终端查看更新。

安装node

1.查看node版本

node -v   

2.查看npm版本

npm -v     

3.更新npm到最新版本

npm -g install npm       

4.安装npm的国内镜像，这样之后就使用cnpm命令，因为是国内的镜像，所以下包的速度会变快。

npm install -g cnpm --registry=https://registry.npm.taobao.org

5.安装vue脚手架

cnpm install -g vue-cli

这样前期工作需要安装的东西就搞定了，接下来构建项目。

 

构建项目

1.随便找个地方创建个文件夹，我的起名为workspace-vue，以后vue的项目就都保存到这里了，然后从终端cd到这个目录下。

2.创建一个新项目，我给这个项目起名为 blog-vue

vue init webpack blog-vue

3.创建完项目之后，cd到项目目录下，安装依赖包

cnpm install

4.这样项目就创建好了，我们可以运行看一下效果了。

npm run dev

5.运行成功，检查效果，可以看到，终端里写着在项目在  http://localhost:8080 运行中，去浏览器输入地址，展示结果。

用webstorm打开项目， 项目结构如下

6.为了可以执行axios发送请求，要在项目目录下安装axios，安装之前记得要停掉服务

cnpm install axios

想知道什么是axios？请点这里

 

编写页面

现在可以开始编写页面了，比如写一些通用的部分。我打算使用ivew的控件编辑页面，先去研究研究，之后继续写。

1.首先在项目目录下安装iview，命令可以再iview官网中找到。安装之前记得停掉服务

cnpm install iview --save

如果有遇到警告，可以重新安装了一下这个ajv

npm i ajv

2.有了组件之后，在main.js中加入三行代码，引用iview

import iView from 'iview'   //引入iview
import 'iview/dist/styles/iview.css'    //使用iview css
Vue.use(iView); //使用iview组件

3.在components文件夹下建一个Login.vue，做一个测试，里面引用的直接可以在iview官网中找个表单的demo。

4.更改App.vue

5.改一下router下面的index.js，更改一下路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/hello',
      component: HelloWorld
    }
  ]
})

6.运行一下看下效果

npm run dev

访问   http://localhost:8080/#/

访问   http://localhost:8080/#/hello

 

学习资料源自：

https://segmentfault.com/a/1190000013950461

https://www.jianshu.com/p/bbc455d86a22