web前端框架之Vue.js

目录

一、安装教程

1、首先下载Node.js

2、查看版本号

3、修改全局模块路径和缓存路径

4、安装vue

二、创建vue项目

1、cmd命令创建项目

1.1手动创建vue项目语法

1.2初始化

3、使用提供的图形化创建项目

三、初始化文件目录

1、目录结构

2、解释

四、安装组件Element

1、网站资源

2、在vscode中打开终端

3、导入Element-Plus相关资源

4、使用

五、总结

---

一、安装教程

1、首先下载Node.js

官网网址：下载 | Node.js 中文网 (nodejs.cn)

（1）根据自己电脑选择合适的版本

（2）双击打开安装包，可以一直点击next

这一步可以自己选择目录，我是安装在了D:\Program Files\nodejs下

这个不需要勾选，他是叫你安装工具

之后都是直接next然后finish

可以查看环境变量，一般都是自动添加（在安装的时候步骤上有）

2、查看版本号

（1）命令如下

node -v
npm -v

（2）结果如下

3、修改全局模块路径和缓存路径

（1）为什么要修改？执行npm install 安装包会默认下载到c盘，为了减少c盘空间占用

（2）默认路径为：【C:\Users\用户名\AppData\Roaming\npm】

（3）修改

全局模块（文件夹名：node_global）和缓存（文件夹名：node_cache）放在了nodejs安装目录，你的nodejs安装目录下创建两个文件夹，名称分别为：node_global和node_cache，在node_global文件夹下再建一个node_modules文件夹，配置环境变量使用

我修改好的目录如下：

（4）新建系统环境变量NODE_PATH

变量值为刚才创建node_modules目录下的路径，根据自己选取的位置输入

我这个变量值是D:\Program Files\nodejs\node_global\node_modules

在系统变量里面加%NODE_PATH%

（5）修改全局变量

在用户变量里面编辑path环境变量

修改原来的默认路径【C:\Users\用户名\AppData\Roaming\npm】改成自己建好的全局模块路径

我的是D:\Program Files\nodejs\node_global

4、安装vue

（1）设置淘宝源或者npm源

淘宝源： https://registry.npm.taobao.org

npm源： https://registry.npmjs.org/

#npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmjs.org/

（2）查看源命令

npm config list

（3）安装vue

npm install vue -g

（4）安装webpack模版

npm install webpack -g

（5）安装webpack-cli

npm install webpack-cli -g

（6）安装vue-cli

记录小错误：

我当时使用的vue-cli版本小于3.0，所以使用vue ui命令使用图形化界面没有反应。

问题解决：

在全局安装 vue-cli 版本大于3.0的状态下，在终端中输入vue ui命令即可启动vue脚手架提供的图形化项目管理界面。可使用vue -V（或vue -version）检查vue-cli版本。

先卸载原来的vue-cli版本，然后再安装

npm uninstall -g vue-cli
npm install -g @vue/cli

（7）安装vue-router

npm install vue-router -g

二、创建vue项目

1、cmd命令创建项目

1.1手动创建vue项目语法

vue init webpack myvue

1.2初始化

（1）手动输入创建完成后下方的两条代码

cd  myvue
npm run dev

（2）输入这两条命令窗口会自动跳到下面这个

（3）在浏览器输入http://localhost:8080

3、使用提供的图形化创建项目

（1）管理员身份运行cmd，输入命令vue ui

vue ui

（2）在浏览器中输入 http://localhost:8000，进入图形化界面创建项目

（3）点击创建

配置好点击下一步

我选择的是标准standard标准配置

也可以不保存预设，预设下次创建的时候就直接受用这个预设就不应再配置了

创建好后

三、初始化文件目录

1、目录结构

2、解释

-public：存放公共文件，例如index.html，favicon.ico。

-src

        -assets：用于存放静态资源文件，例如图表、样式表等。

        -components:存放可服用的Vue组件，例如HelloWorld.vue。

        -router:存放路由配置文件，例如index.js。

        -views:存放页面级别的Vue组件，例如AboutView.vue、HomeView.vue。

        -App.vue：根组件，是项目的入口组件。

        -main.js:项目的主入口文件，进行Vue实例的创建和其他配置。

-babel.config.js:Babel的配置文件，用于将ES6+代码转换为ES5代码。

-package.json:项目的配置文件，包含项目的依赖信息，脚本命令等。

-vue.config.js:Vue项目的配置文件，可以对构建过程进行自定义配置。

四、安装组件Element

1、网站资源

网站：组件 | Element

2、在vscode中打开终端

（1）输入命令进行安装

npm i element-ui -S

（2）报错，查看log日志原因是因为存在依赖冲突导致。项目依赖于 vue@3.4.31，但是同时也安装了 element-ui@2.15.14，后者要求 vue 的版本为 ^2.5.17，即 Vue 2.x 版本。

（3）报错处理

解决方案：寻找 element-ui 的 Vue 3 版本替代品，如 Element Plus。Element Plus 是为 Vue 3 设计的，完全兼容 Vue 3。或者将 Vue 的版本降级到 2.x

安装element plus命令：

npm install element-plus --save

在安装这条命令时报错，查看报错原因是因为@vue/eslint-config-standard@6.1.0 需要 eslint-plugin-vue 的版本为 ^7.0.0，但是你的项目中已经安装了 eslint-plugin-vue@8.7.1。这两个版本之间不兼容，因此 npm 无法正确解析依赖。

解决方法：将 eslint-plugin-vue 降级到与 @vue/eslint-config-standard@6.1.0 兼容的版本。你可以在你的 package.json 文件中修改 eslint-plugin-vue 的版本号，然后运行 npm install

"devDependencies": {  
  "eslint-plugin-vue": "^7.20.0"  // 或者其他 7.x 的版本  
}

再在终端运行：

npm install

此时安装组件就没有问题

安装组件Element-Plus官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

3、导入Element-Plus相关资源

（1）找到main.js文件完整导入：如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

4、使用

（1）从网站拿到源代码粘贴到APP.vue文件中，不需要再粘贴script部分

（2）在终端运行npm run serve，启动服务

（3）在浏览器输入本地网址http://localhost:8083/

五、总结

安装这玩意踩了挺多坑的，尤其一些报错一定要记录下来，因为你可能还会报相同的错误。最多的错误就是存在依赖冲突，版本不兼容。然后要会查看日志文件，我的日志文件在D:\Program Files\nodejs\node_cache\_logs（根据自己的路径找）。刚入坑vue谢谢小菜一枚。