vue + iview项目构建

最近在着手搭建自己的个人博客，确定技术栈为vue + node.js(express)+mysql，所以需要用vue写博客pc端以及后台管理系统页面，而UI组件则是用iview。把自己搭建项目的过程写出来，方便自己查阅，也供大家学习。

vue.js官网
iview
vue-cli

PS：vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

使用Vue-cli是快速构建VUE项目

项目源码 好用请star 感激不尽

vue-cli是官方推荐的构建工具，简化了我们使用webpack的难度，并且支持热更新，所以我们只需要关注开发，从而省去了繁琐的服务重启以及webpack配置打包过程。

此处是vue-cli构建过程，git构建过程在文章末

//安装前需要配置node及npm环境
//全局安装 vue-cli 如果本机以前安装过  就无须执行避免重复安装
$ npm install --global vue-cli
//创建一个基于 webpack 的vue项目
$ vue init webpack vue-iview-master // 后续按回车安装默认即可
//进入到创建的vue项目
$ cd vue-iview-master
//安装依赖
$ npm install
//启动项目
$ npm run dev //启动成功 http://localhost:8080 即可打开测试首页

我的构建过程

执行命令

$ vue init webpack vue-iview-master

打印信息

? Target directory exists. Continue? YesA newer version of vue-cli is available.latest:    2.9.6installed: 2.9.3'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���
? Project name vue-iview-master
? Project description vue iview project
? Author wq
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "vue-iview-master".

执行命令

$ npm run dev

打印信息

> vue-iview-master@1.0.0 dev G:\Git\public\vue-iview-master
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js95% emittingDONE  Compiled successfully in 4029ms                                                           12:36:44I  Your application is running here: http://localhost:8080

安装iview

当前项目根目录执行命令

$ npm install --save iview

引入iview

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式Vue.config.productionTip = false
Vue.use(iView) //使用iview组件 /* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

新加入了三行代码

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

项目中使用iview组件

做个简单的登录页面

src/components 新建 login.vue文件

<style>
html,body {width: 100%;height: 100%;background-color: #1c2438;
}
.login {width: 100%;height: 100%;background-color: #1c2438;position: relative;
}
.login .from-wrap{position: fixed;left: 50%;margin-left: -200px;top: 50%;margin-top: -150px;width: 400px;height: 240px;border-radius: 10px;background-color: #fff;padding: 20px 30px;
}
.login h2 {text-align: center;margin-bottom: 20px;
}
.login FormItem {margin-bottom: 15px;
}
.login .form-footer {text-align: right;
}
.ivu-form-item-required .ivu-form-item-label:before {display: none;
}
</style>
<template><div class="login"><div class="from-wrap"><h2>登录</h2><Form ref="loginData" :model="loginData" :rules="ruleValidate" :label-width="80"><FormItem label="Account" prop="acct"><Input type="password" v-model="loginData.acct" placeholder="请输入账号"></Input></FormItem><FormItem label="Password" prop="pass"><Input type="password" v-model="loginData.pass" placeholder="请输入密码"></Input></FormItem><FormItem class="form-footer"><Button type="primary" @click="handleSubmit('loginData')">Submit</Button><Button type="ghost" @click="handleReset('loginData')" style="margin-left: 8px">Reset</Button></FormItem></Form></div></div>
</template>
<script>
export default {data () {return {loginData: {acct:'',pass:''},ruleValidate: {acct: [{ required: true, message: '账号不能为空', trigger: 'blur' },{ min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur' }],pass: [{ required: true, message: '密码不能为空', trigger: 'blur' },{ type: 'string', min: 6, max: 16, message: '密码长度6-16个字符', trigger: 'blur' }]}}},methods: {handleSubmit (name) {this.$refs[name].validate((valid) => {if (valid) {this.$Message.success('提交成功!')} else {this.$Message.error('表单验证失败!')}})},handleReset (name) {this.$refs[name].resetFields();}}
}
</script>

修改src/App.vue

<template><div id="app"><login></login> // 显示组件</div>
</template><script>
import login from './components/login' // 引入login.vue组件
export default {name: 'App',components: {'login': login }
}
</script><style>
</style>

接下来可以运行(可能会报错下面有解决方案)

$ npm run dev

报错解决

1 Unexpected tab character错误

✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
src\components\login.vue:3:2width: 100%;^
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
src\components\login.vue:4:2height: 100%;^
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
src\components\login.vue:5:2background-color: #1c2438;^
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character
src\components\login.vue:9:2<div class="wrap login">                                              ^                                                                    ......

解决

.eslintrc.js 文件 rules下添加 ‘no-tabs’: ‘off’

rules: { // allow async-await'generator-star-spacing': 'off', // allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-tabs': 'off' // Unexpected tab character错误解决
}

2 Mixed spaces and tabs错误

原因是项目构建时设置eslint，主要是因为代码不规范报错。缩进不规范，分号不需要等原因
最好是在项目构建时 Use ESLint to lint your code? (Y/n) 这一步选no

✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs
src\components\login.vue:12:2<Input type="password" v-model="loginData.user" placeholder="请输入账号"></Input>^✘  https://google.com/#q=vue%2Fno-parsing-error           Parsing error: x-invalid-end-tagsrc\components\login.vue:12:82<Input type="password" v-model="loginData.user" placeholder="请输入账号"></Input>^✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabssrc\components\login.vue:13:2</FormItem>^✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabssrc\components\login.vue:14:2<FormItem label="Password" prop="passwd">

解决

在 config/index.js 里配置 useEslint: false

useEslint: false,

解决错误后启动项目

npm run dev

启动成功

 DONE  Compiled successfully in 5198ms                                                  15:52:25I  Your application is running here: http://localhost:8080

login页面

git项目源码构建过程

项目源码

//解压安装包到英文路径下
//打开cmd窗口
//cd到当前项目根目录 我的是 G:\web\git\vue-iview-master>
//安装前需要配置node及npm环境
//初始化项目生成 Package.json等配置文件
$ npm init -f
//安装依赖
$ npm install
// 启动服务
$ npm run dev //成功后 以下命令不需要执行
------------------------------------------
//报错执行
//初始化项目生成 Package.json等配置文件
$ npm init -f
//清除缓存
$ npm cache clean --force
//安装依赖
$ npm install
//启动服务
$ npm run dev

vue + iview项目构建相关推荐

创建vue+iview项目实现分页增删改查功能
iview+vue实现分页增删改查功能一. 后台代码二.前端工具是webstorm,直接上测试相应js接口三.相应的页面四.效果展示上一片文章总结了下如何创建一个vue项目,前端框架使用iv ...
vue + iview 项目实践总结【完】
一直想把一大篇的总结写完.写好,感觉自己拖延太严重还总想写完美,然后好多笔记都死在编辑器里了,以后还按照一个小节一个小节的更新吧,小步快跑?,先发出来,以后再迭代吧. 最近我们参与开发了一个(年前了) ...
Vue.js项目构建
安装最新的稳定版vue.js # 最新稳定版 $ npm install vue 安装vue.js的官方命令行工具 # 全局安装 vue-cli $ npm install --global vue- ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: $ yarn build or $ npm run bu ...
vue 项目构建失败 Unhandled rejection Error 的原因 sass解析异常
项目构建失败,出现 Unhandled rejection Error 看了一下是sass解析出了问题经测试是 /deep/的使用,导致sass解析问题 vue中,sass某些版本不支持 /deep ...
Vue全家桶构建项目
步骤一.安装vue-cli 首先,我们可以通过npm安装vue-clic,前提是我们需要有node环境,如果电脑还没安装node,先安装,可通过 node -v 查询node的版本号,有版本号则已经安 ...
VUE 3——3：脚手架构建工具介绍及在创建 Vue 3 项目中的应用
这是针对 Vue 新人的一个简单指导. 在前面的文章中,我们不推荐新手直接使用 vue-cli,(尤其是在还不熟悉基于 node.js 的构建工具时),而是通过直接引用的方式: <script ...