菜鸟入门vue和ElementUI(1)

今天将使用vue+elementUI第一次搭建项目的过程记录下来(Mac电脑）
前提条件：电脑上已经装过npm/cnpm

1. 在本地先新建了一个存储项目的文件夹，比如：test。或者直接在c盘d盘都可以

2. 在终端/命令行里面进入这个地址 cd test

3. vue init webpack-simple element-demo

• 这里会让输入 项目名称、介绍、作者之类的，直接按enter键就可以
• 还会询问是否使用sass，选择no/yes均可，看你需要

4. cd element-demo 进入项目
5. npm install
   npm install style-loader -S ----用来解析css的，必须安装
6. npm i element-ui -D

• 补充：
  • i —> install
  • D —> --save-dev
  • S —> --save
  • 如果怕端口号冲突，可以修改，在package.js的dev后面添加 --port 8099 就可以（8099自己随便定义的）

  "scripts":{
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8099",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }
  

7. 在main.js中引入elementui

    import ElementUI from 'element-ui' 
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

8. 然后npm run dev，发现报错

   
   错误信息.png

• 解决方案：webpack.config.js添加配置

    {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      }

9. 配置完config.js后，ctrl+c结束命令，再执行npm run dev

10. 成功！！