Vue.js创建项目

Vue.js创建项目

1.安装 node.js 在官网下载node.js安装包
2.按快捷键 win+R ，输入cmd运行命令提示符，输入 node -v， 出现版本号即为安装成功。
3.新版的nodejs已经集成了npm，所以npm也一并安装好了
4.安装全局安装webpack（我的node安装在D盘)

npm install webpack webpack-cli –d

5. 安装element 1.安装element 用npm安装element

npm i element-ui -S

5.安装element 2.完整引入element， 如果是用HBuilderX直接新建的elementUI 项目，main.js中则自动写入，这一步可省略。
在 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);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

在vue项目中也可以安装element-ui
1.项目中安装element-ui 在项目终端：
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2.在项目中的str目录下的main.js文件中引用element-ui

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

在vue项目中配置路由router

*vue-router 4.x 只能结合 vue3 进行使用,vue-router 3.x 只能结合 vue2 进行使用 在安装router的是要注意与vue对应的版本号 *

在vue项目中也可以安装 vue-router 项目中安装 vue-router 在项目终端：

npm i vue-router@3.5.2

如果安装的vue-router版本太高 我们可以通过
解决方法（1）
卸载原有路由：

npm uninstall vue-router 

然后在继续安装可以用的vue-router版本 安装3.0版本

npm i vue-router@3.5.2`

解决方法（2）：
在命名后添加–legacy-peer-deps即可绕过peerDependency自动安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。

npm i vue-router@3.5.2 -legacy-peer-deps

**

总结：

针对降低vue-router依赖版本问题，提出直接运行命令npm uninstall vue-router卸载当前版本，并重新安装或者是为安装命令npm i vue-router@3.5.2后添加–legacy-peer-deps的方法直接安装“^3.5.2”版本，并进行多次实验可证明两种方法是行之有效的

**