iview构建基本html页面,使用vue-cli创造基于vue.js的iview工程

1、vue-cli 介绍

vue-cli是一个vue.js提供的脚手架，可以快速构造项目结构。

vue-cli本身集成了多种项目模板：

1．simple 很少简单，只有一个html页面

2．webpack 包含ESLint代码规范检查和unit单元测试等

3．webpack-simple 没有代码规范检查和单元测试

4．browserify 使用的也比较多

5．browserify-simple

2.创建vue-cli 工程

1．下载地址：https://github.com/vuejs/vue-cli

2．cnpm install vue-cli -g 全局安装vue-cli，配置vue命令环境

3．vue --version 查看安装的版本

4．vue list 查看安装的模版列表

5．cmd 进入到自己的工作空间

6．vue init webpack vue-cli-webpack 创建一个以webpack为模板的名字为vue-cli-webpack的项目；根据提示默认执行即可。

7．cd vue-cli-webpack 进入生成的项目目录

8．cnpm install 安装依赖模块包

9．npm run dev 启动测试服务

3.引入view

1．cd vue-cli-webpack 进入项目目录

2．cnpm install iview --save 安装view依赖

3．在vue-cli-webpack\src\main.js 文件中引入iview

import iView from 'iview'

import 'iview/dist/styles/iview.css'

Vue.use(iView)

4. 测试

1、创建iview组件：在vue-cli-webpack\src\components目录下创建一个组件如：table.vue 代码从iview官方组件中复制

2、配置路由：在vue-cli-webpack\src\router\index.js文件加入以下代码(红色框内的代码为要加入的)

5.打包放入正式环境

1、npm run build 将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

6. 可能遇到的问题

1．编译的时候遇到es6语法错误

原因：大多是json格式没有按照es6语法的规范缩进、空格、去分号等处理。

处理方式：

1、使用eslint工具也格式化。

2、在vue-cli-webpack\build\webpack.base.conf.js文件中去掉检测规则

3、创建项目的时候 Use ESLint to lint your code? (Y/n) 这一步选no

iview构建基本html页面,使用vue-cli创造基于vue.js的iview工程相关推荐

iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
vue cli 服务器文件,Vue CLI 部署 - 闪电教程JSRUN
部署通用指南如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分,那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置,并遵循后端框架的发布方式即可. 如果你独立于 ...
Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
基于vue前端ui_基于Vue的hydrusrv前端
基于vue前端ui 水合 (hydrusrvue) hydrusrvue is a Vue-based frontend for hydrusrv that makes use of its enti ...
vue 音乐盒app_基于Vue.js的音乐播放器（Webapp）
概述项目是基于Vue.js,成品是一个移动端的音乐播放器,来源于imooc的实战课程.自己动手实践并加以修改拓展. 项目的大致流程是Vue-cli构建开发环境,分析需求,设计构思,规划目录结构,开始 ...
vue v-html scoped,基于vue中的scoped坑点解说
今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这 ...

iview构建基本html页面,使用vue-cli创造基于vue.js的iview工程

iview构建基本html页面,使用vue-cli创造基于vue.js的iview工程相关推荐

最新文章

热门文章