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

来源:csdn博客 分类: 文章浏览史 发布时间:2022-06-18 22:39:21 最后更新:2022-06-18 浏览:105
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2022-06-18 22:39:21

目录

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

终端成功执行

php技术微信