如何新建一个Vue项目并导入element-ui的模板

一、基本环境配置

工欲善其事必先利其器！配置环境也是很让初学者头疼的问题，但作为基础还是要学的，切莫眼高手低。这个操作适用于Windows系统，同时各个环境及配置都是最新版本。
首次创建需要的配置有:

1. npm 想要下载 npm 可以先去 Node 的官网上下载安装 Node ，安装完 Node 之后会自带 npm 。此刻可以通过命令语句 npm -v 查看 npm 是否安装成功。可根据需要更新 npm 至最新版，更新指令为 npm install -g npm
2. 淘宝镜像 为什么需要这个东西呢？因为 npm 的服务器是国外的服务器，我们访问外国服务器很慢。于是淘宝就把 npm 的资料拷贝到了自己的服务器上，就是我们要用到的淘宝镜像。安装淘宝镜像的指令为：
   npm install -g cnpm --registry=https://registry.npm.taobao.org
3. vue-cli vue脚手架，具体的用处就不说了。指令为 cnpm install vue-cli -g
   vue list 指令可以用来查看 vue-cli 是否安装成功（当淘宝镜像安装好以后之后的“npm”改用“cnpm”）。如果安装成功会出现以下显示
4. webpack 指令为 cnpm install -g webpack

以上配置均为一次性，初次配置完以后，可以不再配置。

二、新建 Vue 项目

Windows + R 打开运行然后输入 cmd 一般刚进去的是C盘，这时候可以根据自己的习惯选择不同的目录，

我这里更改到了我的E盘的 study 文件夹里。

• 新建 Vue 项目指令 vue init webpack hello-world（hello-world为自定义的项目名,这里一定不能用大写，如果习惯驼峰命名法的人可以用“-”分隔开）接下来基本是一路敲回车了。
  
  项目新建好以后要进去新建的项目的文件夹里。接下来的所有指令都是在这个项目的文件里输入的。

1. 进入项目目录 cd hello-world（项目名）
2. 安装依赖 cnpm install
3. 运行项目 cnpm run dev
   这些指令输入完以后，你会得到一个地址
   
   把这个地址输入到浏览器以后，你就能看到自己新建的一个 Vue 项目了。
   

三、导入element-ui模块

接下来的所有指令也是在 hello-world 的目录输入的。

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 的配置
   配置完以后，用工具软件打开项目，我这里用的是 Webstorm ，打开 hello-world以后，可以先查看 element-ui 是否已经调用，打开 package.json
   
   这里有了 “element-ui”：“2.6.3”，我们开始进行下一步配置。
   ①：引入element-ui
   打开 src/main.js 添加下面三条语句

• import ElementUI from ‘element-ui’
• import ‘element-ui/lib/theme-chalk/index.css’
• Vue.use(ElementUI)
  
  ②增加 build/webpack.base.conf.js 文件内容
  

{
test: /\\\\\\\\.css$/,
loader:"style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader:"file"
}

③修改 src/App.vue 代码

效果图：

环境的配置还是有很多坑的，作为初学者，坚持把这些坑填了，还是很有帮助的。笔者也是网上尝试了很多方法。虽然我从开始到成功也遇到很多错误，但都没有截图，无法和大家分享了。