新建VUE 2.0 项目及引入Element UI 步骤及常见问题

本文详细介绍如何使用Vue CLI脚手架快速搭建Vue项目，包括安装淘宝镜像、webpack及相关依赖库的过程，并解决常见的端口冲突问题。同时介绍了如何引入Element UI等组件库提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给自己打个小广告:
有开发APP、小程序、网站、后台系统需求 或者 想学习前端的可以私信我哈！

淘宝镜像（npm install -g cnpm --registry=https://registry.npm.taobao.org）

webpack（cnpm install webpack -g 或 npm install webpack -g）

Vue脚手架 （npm install vue-cli -g）

根据模版创建项目 （vue init webpack-simple 注：不能为中文）此时会让你进行一些初始化的设置全选Y 和回车即可

安装项目依赖 （npm install 注：不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)）

启动项目 （npm run dev）

常见问题

1.端口问题

nowa和新建项目的端口都是 8080

报错:     throw er; // Unhandled 'error' event

修改  config/index.js 中的端口  8081 8082。。

安装 Element UI （cnpm install element-ui@next -S）

main.js 引入

import Element from ‘element-ui’
import ‘element-ui/lib/theme-default/index.css’
Vue.use(Element)

读取CSS 字体

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

**添加 webpack.base.conf.js配置 **

 {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: [
          /src/
        ]
      },