脚手架cli3

简介: 脚手架cli3

一、概述

官网

Vue CLI

安装

一般直接全局安装

npm install -g @vue/cli

切换到要创建项目的目录 使用命令创建项目

vue create mydemo

启动项目

npm run serve

备注:

二、项目结构文件分析

cli3创建的项目主要结构文件分析

babel的控制文件,项目中涉及到es6转es5 需要借助babel,直接使用官方配置好的就行,如果要自己配置查看babel官网

2、package-lock.json版本控制文件 说名了安装依赖时版本

3.package.json项目相关配置

4、src/main.js 执行了npm run serve 直接去执行这个文件

/*

该文件是整个项目的入口文件

*/

//引入Vue 这里引入的实际是残缺版vue 可以在node_modules下的vue下的package.json查看  "module": "dist/vue.runtime.esm.js",所以使用render函数


import Vue from 'vue'

//引入App组件,它是所有组件的父组件

import App from './App.vue'

//关闭vue的生产提示

Vue.config.productionTip = false


/*

关于不同版本的Vue:

 

1.vue.js与vue.runtime.xxx.js的区别:

  (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。

  (2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。


2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用

  render函数接收到的createElement函数去指定具体内容。

*/


//创建Vue实例对象---vm

new Vue({

el:'#app',

//render函数完成了这个功能:将App组件放入容器中

 render: h => h(App),

// render:q=> q('h1','你好啊')


// template:`<h1>你好啊</h1>`,

// components:{App},

})

5、assets用来放静态资源比如图片 视频 等

6、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">

<!-- 引入第三方样式 -->

<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

<!-- 配置网页标题 -->

   <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>

3、修改默认配置文件

cli3默认隐藏了所有的webpack配置 若要查看,使用命令

可以使用命令将webpack配置输出到一个文件查看,这个文件只是查看

vue inspect > output.js

查看entry节点 说明了入口文件就是main.js,如果要修改入口文件,可以查看cli官网给出的方法

配置参考 | Vue CLI

则需要需要自己创建一个vue.config.js

具体配置参考

module.exports = {

 pages: {

   index: {

     // page 的入口

     entry: 'src/index/main.js',

     // 模板来源

     template: 'public/index.html',

     // 在 dist/index.html 的输出

     filename: 'index.html',

     // 当使用 title 选项时,

     // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>

     title: 'Index Page',

     // 在这个页面中包含的块,默认情况下会包含

     // 提取出来的通用 chunk 和 vendor chunk。

     chunks: ['chunk-vendors', 'chunk-common', 'index']

   },

   // 当使用只有入口的字符串格式时,

   // 模板会被推导为 `public/subpage.html`

   // 并且如果找不到的话,就回退到 `public/index.html`。

   // 输出文件名会被推导为 `subpage.html`。

   subpage: 'src/subpage/main.js'

 }

}


相关文章
|
API Apache 流计算
Flink窗口的生命周期
Flink窗口的生命周期
Flink窗口的生命周期
|
XML 存储 Java
Activiti工作流框架中任务流程元素详解!使用任务元素进行任务的调度和执行
本篇文章对工作流Activiti框架中的流程元素的任务流程元素的基本概念以及使用方式进行了详尽的说明。包括用户任务,脚本任务,Java服务任务,WebSevice任务和业务规则任务。通过对工作流Activiti框架的各种类型的任务的使用方式的描述,可以在项目中集成使用工作流Activiti框架时进行更多的扩展任务操作。
2225 0
Activiti工作流框架中任务流程元素详解!使用任务元素进行任务的调度和执行
|
存储 Java 编译器
【刷穿 LeetCode】284. 顶端迭代器 : 迭代器基本认识的模拟题
【刷穿 LeetCode】284. 顶端迭代器 : 迭代器基本认识的模拟题
|
5天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
16天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1317 6
|
3天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
15天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1375 87