vue快速入门（二）：vue-cli + element配置 , 快速构建vue项目

vue-cli 快速构建vue项目

一、前期准备工作

1. 安装nodejs

   直接去官方网站下载最新的nodejs http://nodejs.org 下载好之后下一步下一步安装既可

2. 查看nodejs和npm的版本

   node -v

   npm -v

二、安装vue-cli

1. 全局安装vue-cli

​ npm i vue-cli -g

2. 查看版本

   vue -V (大写的V)

3. 在桌面初始化项目 （shift + 鼠标右键 ，在此处打开命名窗口，有的是powershell）

   vue init webpack 项目名称 (项目的名称不要使用大写)

   如：

   vue init webpack vue-cms

4. 确认需要安装需求

   

三、安装vue PC端ui element-ui

完整引入方式

1. 安装element-ui

   npm i element-ui -S

2. 在main.js文件中导入所有的组件

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

按需引入方式

1. 安装 element-ui 和 babel-plugin-component

   npm i element-ui -S

   npm install babel-plugin-component -D

2. 在.babelrc文件中

    {
     "presets": [["es2015", { "modules": false }]],
     "plugins": [
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
   }
   ps: 可能配置完这个文件之后 npm run dev 会报  webpack-dev-server的错误，这个时候直接把node_modules文件删除重新npm i 安装包
   

3. 在main.js 文件中按需引入组件

       import { Button } from 'element-ui';
   
       Vue
           .use(Button)
   
   

   有兴趣小伙伴可以来关注一下我们长沙校区黑马程序员，下面是微信二维码，请加上备注-CSDN