使用IDEA搭建vue-cli项目以及遇到的一些问题

先阅读两篇大佬的文章！

Intellij IDEA搭建vue-cli项目：https://www.jianshu.com/p/dc087bf01475
使用IDEA工具配置和运行vue项目：https://blog.csdn.net/qq_42564846/article/details/82688266

 

第一次搭建vue-cli项目，一点小激动都没有。

 

首先，win+r--->cmd，然后开始搭建vue项目

1、vue init webpack project-name（随意项目名称）   //建议先建一个文件夹，进入该文件夹再新建

2、进入项目名称目录，下载依赖

     1）、npm install

     2）、npm i -g eslint-plugin-vue

     3）、npm install --registry=https://registry.npm.taobao.org

             npm install node-sass --save-dev         //安装node-sass 

             npm install sass-loader --save-dev         //安装sass-loader 

            npm install style-loader --save-dev         //安装style-loader

       缺失这一步可能会报错：Module build failed: Error: Cannot find module 'node-sass'

    4）、cnpm uninstall sass-loader   //卸载当前sass版本

            cnpm install sass-loader@7.3.1 --save-dev

           一样，缺失可能会报错：Module build failed: TypeError: this.getResolve is not a function。报错的原因是sass版本过高，所以先卸载当前sass版本，再下载指定版本。

3、安装element：  npm i element-ui

4、npm install --save element-ui element-ui/lib/theme-chalk/index.css   //安装样式

5、npm run dev    //运行项目（热加载方式）

6、因为初始化项目，会默认安装ESLint，为了不报错，所以要关闭ESLint。

   在vue项目中找到build文件夹 --> webpack.base.conf.js --> module
module: {
    rules: [
      // 把 eslint 关闭
      // ...(config.dev.useEslint ? [createLintingRule()] : []),
      ]
}

7、访问项目

这是我啥都不懂得时候找的大佬的文章练手

菜单样例：
登录：https://www.cnblogs.com/wbjxxzx/p/9943049.html
首页：https://www.cnblogs.com/wbjxxzx/p/9942867.html
侧边菜单栏：https://www.cnblogs.com/wbjxxzx/p/9943049.html