11-Vue脚手架

在这里插入图片描述

文章目录

  • 前言
  • 一、Vue脚手架
  • 二、初始化的工程结构

前言

前言
博客:【无聊大侠hello word】
✍有一点思考,有一点想法,有一点理性!✍
✍本文由在下【无聊大侠hello word】原创,首发于CSDN✍

一、Vue脚手架

Vue脚手架是Vue官方提供的标准化开发工具(开发平台)。

Vue脚手架的最新版本是4.x,这个版本和项目使用的Vue版本无关。

全局安装脚手架:

npm install -g @vue/cli

创建项目:

使用脚手架创建项目:

vue create xxxxx

选择要使用的VUE版本;

11-Vue脚手架_第1张图片

启动项目:

npm run serve

使用vue脚手架创建的项目,默认带了一个helloworld组件。

其他指令:

# 打包编译
npm run build
# 语法检查
npm run lint

二、初始化的工程结构

工程文件夹结构:

  • public
    • favicon.ico:网页的页签图标
    • index.html:html页面
  • @node_modules
  • src
    • main.js:整个项目的入口文件
    • App.vue:App组件,所有其他组件的父组件
    • assets:静态资源文件夹
    • components:组件文件夹
  • .gitignore:git的忽略文件
  • babel.config.js:babel的控制文件,配置es6转换成es5的转换规则
  • package-lock.json:指定包的版本、资源url
  • package.json:包的说明书

文件说明:

main.js:该文件是整个项目的入口文件

// 引入vue
import Vue from 'vue'

// 引入App组件,它是所有组件的父组件
import App from './App.vue'

// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建Vue实例对象
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
}).$mount('#app')  // index.html的id=app的dom作为容器

index.html

DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    
    <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">
    
    
    <title><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>
      
    
    <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>

先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!

你可能感兴趣的:(Vue,vue.js,javascript,前端)