如何建立一个vue的项目

第一步：

安装 node.js（官网：https://nodejs.org/en/ 使用LTS版本）软件安装包名称一般为node.exe,双击完成nodejs自带安装npm、npm.

第二步：

因为npm i webpack -g的时候会自动从国外下载，有时候国内防火墙会阻止而导致下载失败，所以我们将npm改为国内的 npm install nrm -g

安装webpack     npm i webpack -g

安装webpack和vue的脚手本用于打包     npm i webpack-cli vue-cli -g

第三步：

打开你想建立的项目所在路径 -按住shift右击打开命令窗输入 vue init webpack  项目名称

进行选择后，会创立一个vue项目

第四步：

安装scss        npm i node-sass sass-loader -d  

第五步：

1，安装element         npm i element-ui -S

2、引入    在main.js写入一下内容

import ElementUI from 'element-ui';
Vue.use(ElementUI);

3、按需引入     借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：     npm install babel-plugin-component -D

4，然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

可能出现问题-

1、 Error: Couldn't find preset "es2015" relative to directory；

将.babelrc文件重的内容改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后再执行npm install --save-dev babel-preset-es2015

2、npm install报错Maximum call stack size exceeded；

删除node_module文件夹和package-lock.json文件，再重新npm install