vue的安装及环境

VUE

vue的安装及环境

1.安装脚手架：vue-cli。通过cmd输入命令npm install -g @vue/cli(可通过vue官网直接复制)

2.查看vue版本号

3.创建vue工程：vue create vue

4.启动vue项目：通过idea打开刚刚创建的vue，运行后查看本地端口

在浏览器通过端口打开

5.修改界面：通过添加变量"hello 黄以平",在中进行数据绑定。

  data(){
    return {
      msg:"hello 黄以平"
    }
  }
}

<h1>{{msg}}</h1>

更新界面

element框架安装

1.安装npm：可以直接在idea的控制台输入指令npm i element-ui -S(在element官网可以直接复制)
此时可能会报错

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue@0.1.0
npm ERR! Found: vue@3.2.45
npm ERR! node_modules/vue
npm ERR! vue@“^3.2.13” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@“^2.5.17” from element-ui@2.15.12
npm ERR! node_modules/element-ui
npm ERR! element-ui@“*” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\26489\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\26489\AppData\Local\npm-cache_logs\2022-12-06T01_13_54_870Z-debug-0.log

这种情况意味不能解析依赖树 ，需要先修复上面依赖关系冲突或者重新执行一下npm install命令，后面跟–force或者–legacy-peer-deps去接受不正确的(并可能被破坏的)依赖解析。

后面加–legacy-peer-deps后解决问题

2.引入element-ui

通过element官网复制命令：npm i element-ui -S，在cmd或idea中安装。

再引入element插件，同样可在官网复制命令import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’;

注：此时我在idea中引入element时，发生了export’ default’ (imported as ’ Vue’) was not found in’ vue报错

最后发现是因为vue的版本是我很早之前安装的（3.x.x的版本），而脚手架我重新安装过，两个版本不对应，不能适配。

解决方案：通过卸载vue我个人相对的高版本npm uninstall vue，再重装npm install vue@2。然后重新创建一个vue项目，问题就解决了。

3.测试element

在首页新增一个el-button按钮，同样存为msg进行数据绑定

<el-button>{{ msg }}</el-button>

运行后更新界面，测试成功。