VUE-CLI搭建及其简单介绍

安装node.js

(http://nodejs.cn/download/ 可以下载到)

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装 vue-cli

$ npm install --global vue-cli

以上步骤只要安装成功以后，只要不重新安装系统；以后新建项目，无须再次执行

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖，走你

$ cd my-project
$ npm install
$ npm run dev

默认展示界面如下：

google浏览器翻译成中文截图如下：

添加less

npm install less --save-dev
npm install less-loader --save-dev

然后在组件或者视图中给样式加上语言就可以了
webstorm中的 less需要加：type=”text/less”，否则报错

<style lang="less" scoped type="text/less">
    .....
style>

vue文件结构如图

vue的方法，计算属性里面不能用箭头函数

顺便说一句，VUE生成以后的dist文件夹，hbuilder编辑打不开；好大一个坑

css写法