vue-cli 快速生成工程化的 Vue 项目

vue-cli 快速生成工程化的 Vue 项目

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

中文官网：https://cli.vuejs.org/zh/

安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

vue -V //检查是否成功安装

• 基于 vue-cli 快速生成工程化的 Vue 项目

  在终端下运行如下的命令，创建指定名称的项目：

  vue create 项目的名称

步骤选择选项：

① Manually serlect features （自定义名字）

② Choose ,Babel,CSS…

③ 2.x

④ Less

⑤ In dedicated config files

⑥ 自定义名字

• 运行项目，项目跑起来

  cd 项目的名称

  npm run serve

访问 http://localhost:8080/

• vue 项目中 src 目录的构成：

  assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
  components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
  main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
  App.vue 是项目的根组件。
  

vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

① App.vue 用来编写待渲染的模板结构

<template>
  <div>
    <h1>App.vue</h1>
  </div>
</template>

② index.html 中需要预留一个 el 区域

    <div id="app"></div>

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

//导入vue 这个包  得到Vue 构造函数
import Vue from 'vue'
// 导入App.vue 根组件 把App.vue 中的模板结构  替换掉HTML中的内容，渲染到HTML页面中
import App from './App.vue'

Vue.config.productionTip = false
new Vue({
     // el:"#app",
// 把render  函数指定的组件，渲染到HTML 页面中，渲染的是哪个.vue组件，那么这个组件就叫做“根组件”
        render: h => h(App),
    }).$mount('#app') //$mount()方法和el 属性一样