一、【VUE-CLI】Vue CLI 脚手架介绍及安装

一、Vue CLI 脚手架介绍及安装

1、初始化脚手架

1、说明

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

2、具体步骤

  1. (仅第一次执行)全局安装@vue/cli

    1. npm install -g @vue/cli
      
  2. 切换到要创建项目的目录,使用命令创建项目(xxx为项目名)

    1. vue create xxx
      
  3. 启动项目

    1. npm run serve
      

备注:

  1. 如果出现下载缓慢,配置npm淘宝镜像(最好在进行第一步之前就跑这个命令)

    1. npm config set registry https://registry.npm.taobao.org
      
  2. Vue脚手架隐藏了所有webpack相关配置,如果想查看webpack配置,可执行此命令

    1. vue inspect > output.js
      

3、运行效果图

一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第1张图片
一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第2张图片
一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第3张图片
一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第4张图片


2、脚手架文件结构

一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第5张图片


3、主要文件分析

1、main.js

/*
  该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件,它是所有组件的父组件
import App from './App.vue'

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

// 创建Vue实例对象---vm
new Vue({
  // 将App组件放入容器中(可点代码块下方链接进入详解,此处不过多赘述)
  render: h => h(App),
}).$mount('#app') // el: '#app'

看"render: h => h(App)"说明的点这里~

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

4、.vue文件替换成上一节的内容

1、App.vue修改




2、components/School.vue






3、components/Student.vue




5、启动项目并打开页面

由于日常开发使用 npm run dev 命令启动习惯了,故个人在package.json追加一条指令

“dev”: “vue-cli-service serve”

这样我就依然可以快乐的使用 npm run dev 启动了~

一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第6张图片

6、Result

一、【VUE-CLI】Vue CLI 脚手架介绍及安装_第7张图片

你可能感兴趣的:(Vue,简单回顾,vue,vue-cli,脚手架)