Vue 使用vue-cli

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - 使用Vue-cli 笔记

 

目录

使用vue-cli

创建项目

配置文件

启动项目

入口文件

Index.html

Main.js

Eslint修复

第一种

第二种

第三种

更换为淘宝源

查看当前配置

配置淘宝源

验证配置

总结

---

使用vue-cli

创建项目

在终端打开，输入以下命令：

vue create vue2025
# vue2025是自定义项目名称

选择自定义安装 

对选择安装的模块点击空格打上星号

选择版本为2

其他选择配置如下： 

最后安装完成界面如下：

 

配置文件

通过package.json了解项目，如下：

这三个命令并不是固定的，可以修改。

如下：

npm run serve 开发环境构建

npm run build 生产环境构建

npm run lint 代码检测工具

 

启动项目

输入命令

npm run serve

入口文件

Index.html

public目录下的index.html文件是入口文件。

如下图所示：

Main.js

项目的核心入口文件，该文件在项目启动时最先执行，后续所有组件和页面都会通过它加载。

具体内容如下：

render对app进行实例化，挂载到Vue上。

然后在app.vue中编写以下脚本内容。

<template>
  <div>
    hello app
  </div>
</template>

运行后，查看效果。

Eslint修复

第一种

一些编写语法问题可以使用

vue-cli-service lint

来进行修复

第二种

Vscode 自动修复eslint

安装eslint插件，并启用

文件 =》首选项=》设置 =》 用户，打开setting.json。

 

加上以下配置，修改文件保存后，自动修复。

 

第三种

如果每次写一点东西 都自动修复 很麻烦

可以先关闭修复 只有最后写完需要提交时在进行手动修复

暂时关闭代码格式检测

手动修复

 

更换为淘宝源

因为国内npm网络较慢，所以更换为cnpm也就是淘宝源

查看当前配置

打开命令行工具，输入以下命令来查看当前的npm源配置：

npm get registry

 

配置淘宝源

要更换为淘宝的npm镜像，可以使用以下命令：

npm config set registry https://registry.npmmirror.com/

 

验证配置

再次使用npm get registry命令来验证是否已成功更改为淘宝源。

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - 使用Vue-cli 笔记