一、初始化Vue脚手架
第一步（仅执行一次）：全局安装 @vue/cli
在 命令提示符内输入（命令提示符 可由 win+R 调出 运行 界面，输入cmd 即可）
npm install -g @vue/cli
下载速度过慢的话，建议配置npm淘宝镜像
npm config set registry https://registry.npm.taobao.org
第二步：切换到你要创建项目的目录，然后使用命令创建项目，并选择vue版本（可打开文件夹直接在文件夹地址栏输入cmd）
vue create xxxx
第三步：启动项目
用打开刚刚创建的文件，启动项目
npm run serve
最后可以通过配置好的地址在浏览器上查看 Vue为我们创建默认HelloWorld界面
二、简单分析脚手架结构
.gitignore：git版本管制忽略的配置
babel.config.js（重要）：babel的配置文件，通过babel将ES6转换为ES5，官方已经配置好了
package.json：应用包配置文件
package-lock.json：包版本控制文件
src文件夹 -> main.js：整个项目的入口文件
// main.js是整个项目的入口文件
// 引入Vue
import Vue from "vue";
// 引入App组件，它是所有组件的父组件
import App from "./App.vue";
// 关闭vue的生成提示
Vue.config.productionTip = false;
// 创建vue实例对象
new Vue({
render: (h) => h(App),
}).$mount("#app");
src文件夹 -> App.vue：项目主组件，是所有组件的父组件，汇总所有组件
src文件夹 -> assets文件夹：一般放静态资源，例如：网站的logo图
src文件夹 -> components文件夹：用来存放所写的组件（App.vue除外）
public文件夹 -> index.html：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<!-- 针对IE浏览器的一个特殊配置，让IE浏览器以最高的渲染级别渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 开启移动端的理想视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 配置页签图标 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!-- 配置网页标题，最终指向package.json中name -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 当浏览器不支持js时，noscript中的内容就会被渲染 -->
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<!-- 容器 -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
注意：在后续引入自己的文件，并在终端运行npm run serve后出现报错，可能是由于在开发环境下每次保存代码时都启用 ESLint 验证，我们只需在vue.config.js配置文件中添加一下代码端来取消命名语法错误提示
lintOnSave: false,
终端成功执行
本文转载自: https://blog.csdn.net/JHY97/article/details/124045095
版权归原作者 JHY97 所有， 如有侵权，请联系我们删除。
版权归原作者 JHY97 所有， 如有侵权，请联系我们删除。