关于Vue 脚手架

最新推荐文章于 2023-10-26 20:58:55 发布

@Makai要努力

最新推荐文章于 2023-10-26 20:58:55 发布

阅读量276

点赞数

文章标签：前端 java

本文链接：https://blog.csdn.net/m0_58203725/article/details/127822275

版权

VUE Cli(Vue 脚手架)

如何搭建VUE Cli(Vue 脚手架)?

安装Vue 脚手架之前必须保证本机电脑已经安装Node.js
- 关于npm?
  - npm的全称是：Node Package Manager，可译为“Node包管理器”。
  - 在早期没有npm时，如果需要在前端工程中使用某些框架（例如jQuery、Bootstrap等），需要找到相
    关的官网或资源站点，要么下载这些框架的文件，要么使用cdn在线引用这些文件，其过程相对烦琐，
    因为这些框架的具体表现可能不只是一个文件，如果下载，只能下载打包后的文件并自行解压缩，如果
    在线引用，则需要自行添加多条源代码进行引用，同时，是这些框架也是在不停维护和更新的，即使开
    发人员在本地已经下载过这些框架文件，当需要新版本的框架时，又需要重新下载，或者上网搜索最新
    的cdn引用地址。
  - 为了解决这个问题，Isaac Z. Schlueter使用运行在Node.js之上的JavaScript语言开发了npm，它允许配
    置一个仓库，I并将大量框架的文件放在了npm仓库中，并提供了一系列的管理命令，最终，开发人员
    只需要使用npm的命令，就可以在线获取到框架文件。通常，框架的文件会自动的存储到工程目录下，
    并在工程的配置文件中进行注册，开发人员只需要在主配置中进行导入及一些简单的配置就可以开始使
    用这些框架。
    一定程度上，npm与Maven或Gradle是比较相似的。
- 为了使用npm,我们需要下载Node.js安装包,下载地址如下:
- Node.js的安装过程中没有特别的注意事项,整个安装过程中都可以不必修改任何内容,直至其自动安装完成即可
- 由于安装过程中,自动配置了环境变量,安装完成后,可检查npm命令是否可用,在操作系统的命令提示符下执行以下命令即可:
  - npm -v
  - 执行以上命令后，将显示版本好，例如：
    - 8.5.0
- 配置npm源
  - npm源（即npm仓库，称之为：registry）默认是境外服务器，在国内使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内的服务器地址，例如使用https://registry.npmmirror.com作为npm配置源。
  - 配置npm源的命令如下：
    - npm config set registry https://registry.npmmirror.com
  - 当配置成功后，可通过get命令可产看npm源：
    - npm config get registry
  - 将显示当前生效的npm源（并不检查npm元的URL是否有效，所以，即使配置了错误的npm源，也不影响此步操作）
  - 注意：无论使用哪种操作系统，必须保证当前登录的用户具有最高访问权限（也就是超级管理员）
    - Windows操作系统下，请使用管理员模式命令提示符
    - Mac OS下，请使用sudo来执行以上命令
以上步骤将我们环境已经搭建好了，接下来，我们需要在命令窗口中，通过npm命令安装@vue/cli:
- npm install -g @vue/cli
- 运行以上命令安装Vue 脚手架，安装过程中可能需要花费时间，并且，会在窗口出现WARN字样，不必理会，只要不出现（ERR、ERROR）字样即可，如果出现了，只有一种无脑解决方案，那就是重新运行安装命令
- 如果安装卡住了，可以按下Ctrl + c （如果使用的是苹果电脑的MacOS也是按这个键）来终止当前命令的执行，并再次尝试执行安装命令即可
- 安装过程如下图所示
- 当安装完成后，可以通过以下命令来检查是否安装成功：
  - vue -V
  - 注意：-V是大写的！！！
  - 如果能够正常显示版本号，则表示安装成功！
  - 到目前位置，当前计算机就已经具备创建、开发、运行Vue 脚手架项目的基本条件了
创建第一个Vue脚手架项目（demo01）
- 在创建项目之前，需要确定当前位置，你指定的位置在哪里，就将这个Vue 脚手架项目创建在那个目录下（目录可以随机指定，一般建议放在你平常放目录的位置，方便后续查找）
- 通过vue create 项目名称命令即可创建项目，例如：
- 通过以上命令后，按一次回车（切记：只能按一次回车！！！）可能会出现卡顿，那就等着呗，不要做任何操作，等待窗口内容发生如下变化，然后证明我们就进入创建向导了，创建项目的参数为：
  - 如下图，我们通过键盘上下键选择第三个，回车
  - 选中下图中绿色*号选中的三个选项（使用空格选中或取消选中）回车
  - 选中2.x版本，回车
  - 直接回车，默认yes，也可以输入Y或者y，回车
  - 选中package.json,回车
  - 注意：在上述步骤中，如果是第一次创建Vue 脚手架项目，可能会出现使用yum源还是npm源，则根据自己的需要选择，我这里选择npm！！！
  - 出现如下界面，则代表第一个Vue 脚手架项目创建完成
  - 最后，我们的第一个Vue 脚手架项目创建完成，找到项目路径，在IntelliJ IDEA中打开，使用npm run serve命令启动
  - 启动脚手架项目，默认端口8080，由于8080端口使用比较普遍，为了避免发生端口冲突问题，还可以通过在项目中找到package.json文件，将原有scripts下的serve的值由原本的vue-cli-service serve 改为 vue-cli-service serve --port 新的端口号（随机指定，例如：9000）
  - 前端项目启动后，可以通过ctrl+c来停止项目

下面介绍几个项目中常用的文件作用？

src/App.vue：是项目中唯一的.html文件默认绑定的视图组件，可理解为项目的入口视图组件，并且，此页面中设计的内容是始终显示的，在此视图中，有标签，此标签表示“将由其它视图组件来显示”
src/router/index.js：是默认的路由配置文件，此文件中的routes常量配置了路径与视图组件的对应关系，决定了标签将由哪个视图组件来显示
- 关于routes的配置：此属性是数组类型的，其中的各元素通常称之为一个个的“路由对象”，每个路由对象中主要配置path和component属性，即配置路径与视图组件的对应关系，关于component属性，如果某个视图是类似“主页”的定位，推荐通过import语句导入，否则，其它视图推荐使用import()函数导入
main.js：项目的主配置文件，一般我们需要的一些前端框架导入都在该别致文件中进行（下边会介绍几个常用框架的导入）

以上是我们常用的文件，必须要求掌握其作用和使用，对于我们后端程序员来说，不需要了解那么深

Vue 脚手架项目的结构（了解内容）

[.idea]：是通过IntelliJ IDEA编辑项目时，由IntelliJ IDEA创建的文件夹，不需要人为干预
[node_modules]：当前项目的依赖项文件夹，不应该人为干预，需要注意：在使用Git等管理工具时，通常并不会将此文件夹提交到Git服务器，从Git服务器下载得到的项目也不会包含此文件夹及内容，如果没有这个文件夹，则项目无法编译、运行！可以通过执行npm install命令安装项目所需的依赖项，并且，此命令可以反复执行，例如项目并不是没有任何依赖项，而只是缺失其中一部分依赖项，也是通过此命令来安装各依赖项的
[public]：静态资源文件夹，此文件夹下的内容是可以直接被访问的，不会经过项目的编译过程，通常，会在此文件夹下存放：.css文件、.js文件、图片文件等
- favicon.ico：当前网站的图标文件，此文件是固定文件名的
- index.html：当前项目中仅有的唯一.html文件
[src]：项目的源代码的文件夹
- [assets]：静态资源文件夹，与public文件夹不同，此处的静态资源应该是不随程序运行而变化的
- [componets]：被其它视图导入、调用的视图组件的文件夹
- [router]：路由配置文件的文件夹
  - index.js：默认的路由配置文件
- [store]：存储全局的量的文件所在的文件夹
  - index.j````s：默认的存储全局的量的文件
- [views]：视图组件文件夹
- App.vue：直接绑定到了index.html的视图组件
- main.js：项目的主配置文件
.gitignore：用于配置“提交Git时忽略哪些文件、文件夹”
babel.config.js：暂不关心
jsconfig.json：暂不关心
LICENSE：作为Git的开源项目应该包含“许可协议”，此文件就是“许可协议”文件
package.json：当前项目的配置文件，类似Maven项目中的pom.xml文件，在不熟悉此文件时，不建议手动修改文件中的任何内容
package-lock.json：锁定的当前项目的配置文件，此文件不允许手动编辑，即使编辑了，后续也会自动还原成原本的样子，甚至，当你删除此文件后，后续也会自动重新生成此文件
README.md：默认的用于介绍当前项目的文件
vue.config.js：暂不关心

Vue 脚手架中几个常用前端框架的导入

ELement UI
- 在终端窗口运行
```
npm i element-ui -S
```
- 在main.js文件中,通过以下命令完成导入
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
- 此时,我们项目中任何一个视图组件都可以使用Element UI了
axios
- 在IDEA终端窗口运行
```
npm i axios -S
```
- 在main.js中通过以下命令完成导入
```
import axios from 'axios';
Vue.prototype.axios = axios;
```
- 至此,当前项目可以通过this.axios来使用axios
  以上是我们在开发中常用的俩个框架,如果项目需求还需要使用其它框架,则导入方式相似,我们可以通过CSDN或者参照官方文档完成导入