【分享】从零开始新建vue2.x项目并引入Element

一、新建项目

1.查看 node和npm是不是已经安装好命令：node -v  npm -v (没有安装的先安装环境);
2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
3.安装 vue-cli 脚手架   
    1、cnpm install -g vue
    2、cnpm install -g vue-cli    //检测是否安装成功   vue --version
4. 安装 webpack   cnpm install -g webpack 
5.cd  你的运行目录
6.新建基于webpack的vue项目      vue init webpack vuedemo
7.进入项目目录     cd vuedemo
8.安装依赖        cnpm install
9.运行项目        cnpm run dev
10.发布项目       cnpm run build
注：mac电脑需要在安装淘宝镜像前执行： sudo chown -R $USER /usr/local

二、使用element-ui前需安装修改的配置：

//1. 安装 loader 模块：
    cnpm install style-loader -D
    cnpm install css-loader -D
    cnpm install file-loader -D
//2. 安装 Element-UI 模块
   cnpm install element-ui --save 
   
//3. 修改 webpack.base.conf.js 的配置，位置：如下图：

下面为修改配置的代码：

//下面是需添加的代码：
{
test: /\\\\\\\\.css$/,
loader:"style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader:"file"
}

三、引入Element

前面已经全局安装了element-ui，只需要在Vue项目中引入即可
1、打开项目：src/main.js,添加下面三条语句：
      import ElementUI from 'element-ui'
      import 'element-ui/lib/theme-default/index.css'
      Vue.use(ElementUI)

至此，从新建Vue2.x项目到引入Element-ui组件的工作已经完成，是不是很简单？回到新建的项目，执行 npm run dev 命令走起 ,但是此时启动项目却报错
This dependency was not found:
依赖找不到？？明明安装了依赖的呀。。。

先说解决方法：

import 'element-ui/lib/theme-default/index.css'

改为

import 'element-ui/lib/theme-chalk/index.css';

原因：在安装element-ui组件时默认安装最新版本2.x，而我们的引入element-ui

import 'element-ui/lib/theme-default/index.css

theme-default文件夹其实是Element-ui 1.x 的目录。
根据import的路径看’node_modules\element-ui\lib’这个目录下并没有theme-default这个文件夹，只有个theme-chalk，所以就直接改成它，这就好了。