vue搭建

环境是webstorm

1、搭建脚手架

npm install -g vue-cli

-g即为全局
cli是vue的脚手架

2、初始化项目

vue init webpack

在webstorm中使用terminal(获取在cmd中进入项目路径)

3、安装按需加载插件

npm install babel-plugin-import --save-dev

需要在根目录下文件".babelrc"中增加

["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
}]

最终".babelrc"文件下的内容为（当前是指空项目）：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

4、安装iview

npm install iview --save

此处记得要有“--save”，否则会有问题
在文件“.main.js”中的import处，加入下面一句，导入ivew的样式

import 'iview/dist/styles/iview.css';

至此，项目已搭建完毕，可通过

npm run dev

进行启动项目，项目地址可在启动成功后获取

彩蛋

因为项目现在是按需加载，所以需要全局加载组建，可在“main.js”中，加入类似这样的语句，作用全局，无需页面内引入：

Vue.component('Row', Row);
Vue.component('Col', Col);
Vue.component('Button', Button);
Vue.component('Input', Input);
Vue.component('Select', Select);
Vue.component('Option', Option);
Vue.component('Icon', Icon);
Vue.prototype.$Message = Message