Vue-cli脚手架搭建环境

全局安装vue-cli

 cnpm install vue cli g      全局安装

安装完成生成命令vue 命令如下

vue --version 显示版本
vue list 显示可用模板

初始化项目 生成项目模板

vue init 模板名 项目名 例 vue init webpack-simple vue-cil-demo

进入生成的项目目录 安装模块包

cd vue-cil-demo	进入路径
cnpm install	安装依赖	

运行

npm run dev 	启动测试服务
npm run build 	将项目打包输出dist目录 项目上线的话要将dist 目录拷贝到服务器上
生成会自动压缩js输出到dist 

组件注册于src目录下新建components目录 里面放我们的vue文件

首先需要在app.vue 里面导入组件 
import Hello from './components/Hello'
然后在vue实例里注册 components{Hello}

引入element UI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';   /* 再单独引入element UI的样式文件 */
Vue.use(ElementUI);   

在main.js中引入js 和单独引入css 再使用他们

手动配置loader

在webpack.config.js中手动配置loader

	 {
        test: /\.css$/,
        use: [
          'vue-style-loader',
		  'style-loader',
          'css-loader'
        ],
      }
      
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }

主要配置css-loader 和字体字库的loader