Vue CLI 初始化脚手架详解

最新推荐文章于 2023-05-16 20:11:33 发布

半夏_2021

最新推荐文章于 2023-05-16 20:11:33 发布

阅读量278

点赞数

分类专栏： Vue 文章标签： vue.js npm javascript

本文链接：https://blog.csdn.net/fd2025/article/details/125326677

版权

Vue 专栏收录该内容

66 篇文章 17 订阅

订阅专栏

1.说明

1.Vue 脚手架是Vue 官方的标准化开发工具 (开发平台)

2.最新的版本是 4.X

3.文档 Vue CLI

2.具体步骤

1.如果下载缓慢请配置 npm 淘宝镜像 npm config set registry http://registry.npm.taobao.org

安装完成后，cmd 中输入 vue，查看是否安装成功。

2.全局安装 @vue/cli npm install -g @vue/cli

3.切换到创建项目的目录，使用命令创建项目 vuecreate xxx

4.选择 vue的版本

5.启动项目 npm run serve

6.打包项目 npm run build

7.暂停项目 Ctrl +C

3.脚手架文件结构

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

src/components/School.vue

<template>
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
  export default {
    name: "School",
    data() {
      return {
        name: "UESTC",
        address: "成都",
      };
    },
    methods: {showName() {alert(this.name);},},
  };
</script>

<style>
  .demo {background-color: orange;}
</style>

src/components/Student.vue

<template>
  <div>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
</template>

<script>
  export default {
    name: "Student",
    data() {
      return {
        name: "cess",
        age: 18,
      };
    },
  };
</script>

src/App.vue

<template>
	<div>
		<img src="./assets/logo.png" alt="">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	// 引入组件
	import School from './components/School.vue'
	import Student from './components/Student.vue'

	export default {
		name:'App',
		components:{ School, Student }
	}
</script>

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">
      
        <!-- 配置页签图标 <%= BASE_URL %>是public所在路径，使用绝对路径 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      
        <!-- 配置网页标题 -->
        <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>
    </body>
</html>

render函数

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:'#app',
  // render函数功能：将App组件放入容器中
  // 简写形式
  render: h => h(App),
  // 完整形式
  // render(createElement){
  //   return createElement(App)
  // }
})

关于不同版本的函数

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

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

b.vue.runtime.xxx.js 是运行版的Vue,只包含核心功能，没有模板解析器，esm就是 ES6 module

2.因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用render 函数接收到 createElement 函数去指定具体内容。

vue.config.js 配置文件

参考官方文档: https://cli.vuejs.org/zh/config/#pages

vue inspect > output .js 可以查看到Vue 脚手架的默认配置

使用 vue.config.js 可以对脚手架进行个性化定制，和package.json 同级目录,需要创建 vue.config.js文件。

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js' // 入口
    }
  },
  lineOnSave: false	// 关闭语法检查
}

半夏_2021

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue CLI 初始化脚手架详解

Vue CLI 初始化脚手架详解
复制链接

扫一扫

专栏目录

Vue CLI 初始化脚手架详解

“相关推荐”对你有帮助么？