脚手架cli3

程序三两行

于 2022-07-19 09:34:55 发布

阅读量167

点赞数

分类专栏： # vue 文章标签： vue.js 前端 javascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_34491508/article/details/125823422

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、概述

官网

Vue CLI

安装

一般直接全局安装

npm install -g @vue/cli

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

vue create mydemo

启动项目

npm run serve

备注：

如果npm执行缓慢请提前安装淘宝npm镜像

二、项目结构文件分析

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

1、babel.config.js

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