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在官方文档上,对于使用脚手架vue-cli3的项目的使用只有一句话:“我们为最新的 Vue CLI 3 提供了相应的 iView 插件,如果你正在用 Vue CLI 3,可以直接在插件中搜索 iview,安装插件来使用。” 老实说,第一次...
vue-managevue-manage包含了两...前台项目:vue-backend-mange由于前台项目是根据vue-cli 3.0构建的,所以编译启动之前要将vue-cli升级到3.0之后的步骤无外乎这几步了:Project setupnpm install本地开发运行命令npm r
vue-cli3.x-configure基于vue-cli3.x下,配合vuex、vue-router、iView、axios、scss、amfe-flexible、vConsole等等.我对SessionLogs.vue做了pxtorem的编译,用的是局部转换 postcss-px2rem-exclude调试工具我用的是...
一个完整的使用vue2.0、vue-cli3.0、iView3.0包含前后端的项目.zip
关于介绍基于Vue-Cli3 + iView3的后台管理系统技术栈Vue,Axios,Webpack,ES6,Vue路由器,Vuex,Sass等截图登录界面家庭面常用命令# 下载代码$ git clone https://github.com/dingFY/vue-iview3-admin.git# 安装...
基于vue的单页面应用项目代码,项目的演示地址https://www.ai0011.com/work/ 应用了vue路由、iview、php、mysql等技术
使用vue cli3.0创建的TypeScript项目。 1.使用vue-cli3.0搭建项目 2.结合iView + aoixs
伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中,相信很多人都会选择官方的...
vue-cli 3.x 的beta版本,基于iview做的公司的角色权限管理平台。 3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,看了教程,要自己在根目录建vue.config去配置,...
1. 前端基于 vue 及 vue-router、vuex、组件库 iview ui 2. 使用 Node 转发请求,访问 Java api 接口 3. 后端采用 Java Web SSM 框架 ## 开发环境 1. vue:vue-cli 3 2. node:Node.js 12.5 3. java:jdk8 4. ...
做vue项目使用的iviewUI库,打包上线之后发现icon都不显示,然后做了很多尝试,更改打包路径等,都没有太好的效果,最后还是在网上找到了方法: 1. 方法一: 在build/utils.js下面找到这段代码,将其中publicPath...
在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:...
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,...
最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁。以下总结下应用过程中的一些经验。 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # ...
项目原因把element-ui组件的tree树形控件迁移了一下,适配了iview组件 element-ui的tree树形控件修改为适应iview组件 element-ui tree树形控件原始码抽离,适应iview,修改了原始码,... 1.1.1修复了vue-cli载入失败
毕业设计,基于SpringBoot+Python+Vue+MySql开发的前后端分离的毕业设计选题系统,含源码,数据库,毕业答辩 后端服务同时包含SpringBoot和Python两个版本 毕业设计选题系统的设计与实现 采用前后端分离开发方式 ...
vue 版粒子波背景 组件
基于Vue CLI 3 + iView的后台管理系统,支持:开发调试,构建,代码规范校正等。 技术栈 Vue,Webpack,ES6,Vue路由器,Vuex,Sass,PostCSS等。 例子 线上的例子 用户:admin 密码:123456 服务端框架 命令 # 下载...