从零开始新建vue2.x项目并引入Element

每次新建vue项目引入element-ui组件时都要百度搜索依赖配置，现在记录以备日后查看。

一、新建项目

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 的配置，位置：如下图：

image.png

下面为修改配置的代码：

//下面是需添加的代码：
{
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)

image.png

至此，从新建Vue2.x项目到引入Element-ui组件的工作已经完成，是不是很简单？回到新建的项目，执行 npm run dev 命令走起 ,但是此时启动项目却报错
This dependency was not found:
依赖找不到？？明明安装了依赖的呀。。。好吧，欲知详情请看我下一篇文章
解决elemnt-ui安装后运行报错的问题