vue-cli实战之pos系统

一、vue-cli 全局安装(建议全局安装)，只需要安装一次

npm install vue-cli -g

第一次安装了之后，以后在用init创建新项目的时候就不需要再安装vue-cli了。因为全局安装是将安装包放在 /usr/local 下或者你 node 的安装目录，以后可以直接在命令行里使用。

直接 vue init webpack，初始化项目，注意是vue init，不是npm init(npm init是新建package.json，里面没有依赖包，需要自己手动添加)

然后npm install，安装package.json(vue-cli会自动写入相关的依赖包)里面的各种依赖包

然后npm run dev，开始项目的开发

二、对项目目录进行修改

components目录下，新建common公共组件文件夹、page单页面文件夹

公共组件里面的css样式不加scope，因为要求在所有页面都可以使用

三、阿里图标

网址：http://www.iconfont.cn

新建项目

选择需要的图标，点击添加至项目

点击查看在线链接

生成css引入的代码，生成后就可以在项目首页index.html引入了：<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">;

使用：<i class="icon iconfont icon-hanbao"></i>

四、使用饿了么组件库Element

安装：npm install element-ui --save

main.js引入：import ElementUI from 'element-ui' //因为是使用npm安装的，所以可以直接引入，不用加什么路径

然后引入样式：import 'element-ui/lib/theme-default/index.css'

注册使用：Vue.use(ElementUI); //import的时候取名字是为了方便后面的使用，如果后面不用可以不需要取名字，比如样式的引入，就没有取名字

五、使用axios，通过接口拉取远程数据

安装：npm install axios --save //注意是--save，不用加-dev

引入：在哪个组件使用就在哪个组件引入 import axios from 'axios'

然后就可以直接使用了

六、打包 

更改打包配置

修改config文件夹下的index.js文件里面的build模块

assetsPublicPath: '/',后面的'/'改为'./'，加个点.

然后取消npm run dev，然后npm run build

零碎知识记录：

原生js获取屏幕宽高：

获取屏幕宽度：document.documentElement.clientWidth

获取屏幕高度：document.documentElement.clientHeight

刚刚加载时，要获取数据(如通过axios)，放在created里面获取

如果要对DOM元素进行操作，就放在mounted里面操作

类似这种赋值：<span class="o-price">￥{{goods.price}}元</span> 人民币￥符号可以写死，单位元也写死，里面的数值才给与赋值

绑定click事件，要在循环的那个元素上绑定，因为只有循环的那个元素上才有goods这个对象

JSON.stringify()【将 JavaScript 对象或数组转换为 JSON 字符串。】

JSON.parse()【将 JSON 字符串转换为 JavaScript 对象或数组。】

alt+shift+f：vscode代码格式化

判断商品是否有，用this.totalCount !=0来判断，不要使用this.tableData是否为空，因为空对象在if里面会进行转换为true，从而会执行里面的代码

©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任