Vue知识点整理（三）- Vue脚手架（1）- 初始化Vue脚手架、简单分析Vue脚手架结构

JHY97

已于 2022-04-18 00:32:26 修改

阅读量1.4k

点赞数 1

分类专栏： Vue笔记文章标签：前端 vue

于 2022-04-16 07:30:00 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/124045095

版权

Vue笔记专栏收录该内容

34 篇文章 7 订阅

订阅专栏

一、初始化Vue脚手架

二、简单分析脚手架结构

一、初始化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,

终端成功执行

JHY97

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue知识点整理（三）- Vue脚手架（1）- 初始化Vue脚手架、简单分析Vue脚手架结构

目录一、初始化Vue脚手架二、简单分析脚手架结构一、初始化Vue脚手架第一步（仅执行一次）：全局安装 @vue/cli在命令提示符内输入（命令提示符可由 win+R 调出运行界面，输入cmd 即可）npm install -g @vue/cli下载速度过慢的话，建议配置npm淘宝镜像npm config set registry https://registry.npm.taobao.org第二步：切换到你要创建项目的目录，然后使用命令创建项目，并选择vu
复制链接

扫一扫