初始化脚手架


Vue CLI 说明

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

2)最新的版本是 5.0.8

3)文档:​​https://cli.vuejs.org/zh/​

cli : command line interface (命令行接口工具 ,俗称脚手架)

安装脚手架项目

第一步:全局安装 Vue CLI,在命令提示符下运行:

> npm install -g @vue/cli

第二步:切换到创建项目的目录,使用命令创建项目:

> vue create vue_pro

Vue2(笔记24) - 脚手架 - 初始化脚手架_vueCLI

选第二个, Vue2 的项目;

vue cli 给创建了一个完整的开发环境,还配个小示例;

Vue2(笔记24) - 脚手架 - 初始化脚手架_脚手架_02

看到 Successfully created project 字样,就说明创建好了;

第三步:启动项目

接下来,进到这个项目目录,运行:

> cd vue_pro
> npm run serve

Vue2(笔记24) - 脚手架 - 初始化脚手架_Vue_03

还给开启了内置的web服务,访问这个地址:

Vue2(笔记24) - 脚手架 - 初始化脚手架_vueCLI_04

这样就开启了 Vue CLI 给创建的项目,还自带 helloword 的组件;


到了这步,可以先停止服务,打开VSCode,看看这个项目:

分析脚手架结构

VSCode 打开项目,有不少东西:

Vue2(笔记24) - 脚手架 - 初始化脚手架_Vue_05


gitignore : git 的忽略文件,有什么文件和文件夹不想接受 git 的管理,就写在里面;

babel.config.js :babel 的控制文件;

package.json :包配置信息;

package-lock.json :包版本控制文件;

Vue2(笔记24) - 脚手架 - 初始化脚手架_vueCLI_06

src 中两个文件夹和两个文件: 

main.js : 入口文件,当 npm run serve 运行后,首先执行的文件;

// 引入 vue
import Vue from 'vue'
// 引入 app 组件,是所有组件的父组件
import App from './App.vue'
// 关闭 vue 的生产提示
Vue.config.productionTip = false
// 创建 vue 对象 --- vm
new Vue({
render: h => h(App),
}).$mount('#app')

import Vue from 'vue'

node_modules 包里引入多个版本的Vue,在Vue的 package.json 文件中可以看到:当前项目中默认引入的版本是:dist/vue.runtime.esm.js

Vue2(笔记24) - 脚手架 - 初始化脚手架_脚手架_07

app.vue :组件管家,管理着项目中的所有组件;

render: 这个函数之前没有接触过,是模板解析器,完整版的 Vue 里自带了,脚手架生成的项目中,Vue的默认版本没有带;

Vue2(笔记24) - 脚手架 - 初始化脚手架_Vue_08

template 模板部分;引入 assets 中的静态资源;

script 代码中,import 了 HelloWorld 组件;

再看一下 public 中的 index.html

Vue2(笔记24) - 脚手架 - 初始化脚手架_vueCLI_09

index.html 里面,应该都能看得懂;


把之前自己写的组件复制进来:

Vue2(笔记24) - 脚手架 - 初始化脚手架_Vue_10

重新运行一下 :

> npm run serve

Vue2(笔记24) - 脚手架 - 初始化脚手架_Vue_11

自己写的组件也跑起来了。