VueCLI

介绍

目标：

知道什么是VueCLI

什么是

答：是脚手架，其可以把许多项目通用的依赖包(vue、webpack、路由、vuex、less编译器等等) 和 通用的配置都给做好安装好，使得开发者全部的注意力都集中在业务层面，明显提升开发效率的，真实项目都要使用脚手架开发。

依赖包：axios、vue等等都是依赖包，一个依赖包中有许多 模块

安装

目标：

能够安装和使用vuecli

安装vuecli：

npm i -g @vue/cli   // 使用该方式安装

上述依赖包通过全局方式安装，完毕后在系统任何目录都会执行名称为"vue"的一个指令

依赖包安装完毕，会形成 在 C:\Users\ssh\AppData\Roaming\npm\node_modules@vue\cli 目录

vue --version 查看脚手架版本，现在默认是4.0.5版本(如果是2.9.6就是错误的，需要卸载重新安装)

npm un -g @vue/cli 卸载

vuecli创建项目：

vue  create  项目名称(01-pro)

注意：

1. vuecli创建新项目时，项目名称必须是一个新目录，完毕后会自动生产之，并在其中生成项目需要的文件
2. 项目(01-pro)上级各个目录名字最好为英文 或 数字 或 中横线 不要使用 中文的或其他特殊符号定义上级目录名字

创建项目结构文件

目标：

利用vuecli创建自己的第一个项目

步骤：

运行以下命令来创建一个新项目，位置随意，但是各个上级目录最好都是英文的，my-project是项目名称，也是项目目录，不要提前创建

vue create my-project

结构文件说明

|-- node_modules								// 项目需要的依赖包
|-- public										 // 静态资源存储目录
|   |-- index.html							// 项目主容器文件********
|   |-- favicon.ico							// 项目默认索引图片
|-- src
|   |-- assets									// 放置一些静态资源文件，例如图片、图标、字体 
|   |-- components							// 公共组件目录
|   |-- views									  // 业务组件目录
|   |-- App.vue									// 顶层根基路由组件
|   |-- main.js									// 项目主入口文件(包括Vue实例也在这)******
|-- .browserslistrc               // 哪些浏览器及版本可以运行该项目的说明
|-- .editorconfig								// 代码规范配置文件
|-- .eslintrc.js								// eslint代码规范检查配置文件
|-- .gitignore									// git上传需要忽略的文件格式
|-- babel.config.js							// babel配置文件
|-- package.json								// 项目基本信息配置文件
|-- package-lock.json						// 依赖包版本锁定文件
|-- README.md								    // 项目普通说明文件
|-- vue.config.js								// webpack 配置文件(与webpack.config.js作用一致)

注意：

1. public/index.html文件是div容器所在文件
2. src/main.js是Vue实例所在文件

项目运行
目标：

能够把vuecli创建的项目运行起来

步骤：

1. 修改src/main.js文件为如下内容

// import Vue from 'vue' // Vue实例有render可以使用的
import Vue from 'vue/dist/vue.common.js' // Vue实例 没有 render时候可以使用的
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  data:{
    msg:'项目已经运行了'
  }
  // render: h => h(App)
}).$mount('#app')

2 修改public/index.html文件，使用Vue实例的data数据

    <div id="app">
      {{ msg }}
    </div>

3 修改vue.config.js文件内容如下

module.exports = {
  lintOnSave: false,
  devServer:{
    open:true, // 项目运行自动开启浏览器
    port:16699 // 给项目运行创建web服务的端口号码(1~65535之间)
  }
}

当前项目运行的时候会创建一个http服务，上述16699就是服务器的端口号码，

open:true 项目运行的时候，会自动打开浏览器并呈现效果
4 在终端中执行命令

 npm  run  serve

1. 上述命令需要在项目根目录下运行(01-pro目录下)
   serve:指令标志是package.json文件配置好了

现在项目可以运行了，并且有实时加载的效果，业务文件随时改变，浏览器随时查看到对应效果
注意：

npm run serve  指令需要在项目根目录下运行