1. 全局安装 vue-cli$ cnpm install --global vue-cli

2. 创建一个基于 webpack 模板的新项目$ vue init webpack my-project

3. 这里需要进行一些配置,默认回车即可

4.进入项目  cd my-project

5.安装全局   npm install

6.#通过 npm 安装有赞(vant)   npm i vant -S

7.运行项目 npm run dev

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图

以上步骤说明你已经成功创建一个vue项目了!!!!

注意了!以防你下次不懂怎么打vue项目,贴心的哦帮你想好了啦

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图1


以下开始修改vue的内容啦,首先在static下创建css和images文件夹然后再main里面引进来就可以了(这里还没有安装scss所以还不能使用scss哦!)


vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图2

然后就到修改路由配置了

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图3

再然后就是修改首页内容啦

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图4

接着就是创建一个公共底部组件啦(头部公共组件也是同理创建啦)

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图5

再接着就是创建一个内页文件夹了

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图6

眼睛不要离开屏幕,去有赞搬砖了哦

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图7

少掉坑还可以这样搬其他你想要的哦

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图8

第三步是在components里创建组件名称啊(例如  'van-swipe': Swipe,)


接下来就到打包vue咯,稳住。。。。

1.修改文件夹的路劲哦,看清楚下面的图片了

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图9

终端运行命令 npm run build (要不要暂停项目先呢看你自己咯,暂停方法 ctrl + c)【这里有一个坑就是不能使用最新版本HBX】

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图10

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图11
dist转换成app,HBuilderX没有此选项,请用HBuilder

开始用HBuilder打包咯:

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图12

查看打包状态以及下载

vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目插图13

最后你还想再修改项目的话,记得改回来config文件夹中的index.js哦,祝各位大神少踩坑。。。。。

文章转载于:https://www.jianshu.com/p/969b4af41ccd

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《vue项目创建,vant项目创建,vant项目打包,HBuilder打包vue项目,HBuilder打包vant项目
   

还没有人抢沙发呢~