Vue.js2.0环境配置到你第一个叼大的App!
来源:互联网 发布:4gip网络加速器 费用 编辑:程序博客网 时间:2024/06/05 03:45
最近Vuejs太火了,弄的老夫也想学一下,参考了很多大神的文章我决定总结一下,虽然我不会前端- -~,还是那句话,知识用的时候在学就够用!
老鸟自行退散!老夫要开始装x了
需要软件:
HBuilder
nodejs环境
vue-cli
cnpm
一、环境搭建
安装nodejs点爹
安装好之后 node -v 查看版本
安装cnpm (天朝你懂的!)
安装 vue-cli 目录构建工具(脚手架工具 ,就是盖房子 外面那层栅栏 ,工人站在上面的那个)
npm install -g vue-cli
安装 前端必备HB 点爹呀,愁啥呢(打包用)
当然了 你喜欢webstorm、sublime3等等 ide 都行 因为反正特么都没有vuejs 提示插件,最多就是有个鸡肋的高亮!
二、正式开始装第一次x!
1、找个你喜欢地方,新建一个文件夹(路径别弄中文免除后患)
运行 vue init webpackvue 构建 目录 (蓝色 vue 为目录名称随意)
按照上图 选择
弄好之后在原来的文件夹 下面 多了一个vue 文件夹 进入
cd 在当前目录 运行 cnpm install
目录变为如下
运行 查看 npm run dev
之后 在命令行 Ctrl+c 关闭 这个实例
修改 配置文件 找到config里的index.js,打开修改assetsPublicPath 为“.” 不改 打包后 路径错误
三、打包App 发布到手机
在命令行 执行 npm run build
新增加了一个 文件夹 dist 进入(编译生成的结果)
打开HB (启动超级慢 因为 Java产品 所以渣,所以慢)
文件---》新建---》移动App
新建好之后 里面应该是这样的
只留下 mainfest.json 这个是 手机app的 配置文件你可以打开看看
之后把 刚才 dist下面的两个文件复制进来 变成下面的
把 上次命令 生成 dist 目录下 的文件 复制到 vueapp 项目下如上图!
一切 都是默认 因为 什么功能也没有!
手机 测试通过 差不多 就是这个玩意 几年前 的wex5 但是 没有vue 的虚拟dom html渲染卡的一比 根本没法用 感谢 油大大的作品 改变了 3端!
- Vue.js2.0环境配置到你第一个叼大的App!
- Vue.js2.0到APP【HBuilder】
- vue.js2.0环境搭建
- vue.js2.0视频教程
- npm的安装及Vue.js2.0从入门到放弃---入门实例(一)
- vue.js2.0搭建开发环境及构建项目
- Vue.js2.0 入门实例(一)(环境安装)
- 20171102vue.js2.0:搭建开发环境及构建项目
- vue.js2.0实战:搭建开发环境及构建项目
- Vue.js2.0从入门到放弃---入门实例
- vue.js2.0自定义过滤器
- Vue.js2.0 入门实例
- vue.js2.0点击获取自己的属性和jquery
- vue.js2.0关于computed、methods、watch、created的区别
- vue.js2.0实战(1):搭建开发环境及构建项目
- Vue.js2.0从入门到放弃---入门实例(一)
- Vue.js2.0从入门到放弃---入门实例(三)
- Vue.js2.0从入门到放弃---入门实例(一)
- AutoCompleteTextView示例
- java中的Integer和int比较
- 使用Node.js搭建微信支付后台(三)
- 记住密码的用户登录
- lsattr和chattr用法
- Vue.js2.0环境配置到你第一个叼大的App!
- Java的equal和==的区别
- Javascript <script>标签详解
- Linux--进程间通信(二)-命名管道(pipe)通信
- C++工厂方法模式
- 使用HttpURLConnection需要注意的地方
- 关于Android中获取短信息会话(threads)表中的信息
- Java集合框架图
- STM32之外部中断 EXTI