1 简介

　　CLI 是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
　　Vue CLI是一个官方发布 vue.js 项目脚手架
　　使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置.

　　VueCLI是一个官方发布vue.js项目脚手架，使用 VueCLI 可以快速搭建 vue 开发环境，以及对应的 webpack 配置

　　vue-cli 构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握 es6，而 vue 的全家桶还是都要熟悉的的。

　　Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

　　安装新版的脚手 node 也有版本要求，Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本

 

2 Vue全家桶

　　vue全家桶是vue开发必备的也是必学的东西，概括起来就是：

　　　　1）vue-cli项目构建工具
　　　　2）vue-router路由管理
　　　　3）vuex状态管理全局变量
　　　　4）axios，http请求工具。
　　　　5）UI 框架 element，iview，vant

 

3 VueCli 安装

　　https://www.cnblogs.com/jthr/p/16386580.html

　　

4 初始化一个项目

1）在创建项目的目录执行命令

    vue create 项目名称

 

2）选择使用的vue版本

　　选择一个版本即可，2或者3随自己的需要，选择之后就会开始创建项目了，需要几分钟

　　

 

3）初始化完成

　　

 

4）启动项目

　　进入项目的根目录，执行命令

npm run serve

 

5) 访问项目

　　现在，初始化一个项目完成，我们也可以访问到了

 

5 项目结构

　　我们使用vscode打开项目

　　

 

.文件目录
├── node_modules  项目依赖包
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

 

5.1 node_modules（项目依赖包）

　　node_modules 里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法：打开命令工具，进入项目目录，输入 npm install [依赖包名称]，回车。

　　安装依赖：

npm i

　　在两种情况下我们会自己去安装依赖：
　　　　项目运行缺少该依赖包
　　　　安装插件：如 vuex

　　PS：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如

npm install vue-loader@11.1.4

 

5.2 index.html（主页）

　　index.html 为项目的主页，跟其他 html 一样，但一般只定义一个空的根节点，在 main.js 里面定义的实例将挂载在根节点下，内容都通过 vue 组件来填充。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
      
        <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
        <!-- 开启移动端的理想端口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
        <!-- 配置页签图标 <%= BASE_URL %>是public所在路径，使用绝对路径 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      
        <!-- 配置网页标题 -->
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
      
          <!-- 当浏览器不支持js时，noscript中的元素就会被渲染 -->
          <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>

 

5.3 main.js（入口文件）

　　main.js 为项目的入口文件，即单入口，主要是引入 vue 框架，根组件及路由设置，并且定义 vue 实例

// 该文件是整个项目的入口文件

import Vue from 'vue'                // 引入Vue  这里引入的是一个精简后的vue
import App from './App.vue'    // 引入App组件，它是所有组件的父组件

Vue.config.productionTip = false

new Vue({
    el:'#app',
  render: h => h(App),            // render函数完成了这个功能：将App组件放入容器中
})// .$mount('#app')

 

5.4 App.vue（根组件）

　　汇总所有组件，也就是所有组件的老大

 

6 main.js中的render函数说明

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:'#app',
  // render函数功能：将App组件放入容器中
  // 简写形式
  render: h => h(App),
  // 完整形式
  // render(createElement){
  //   return createElement(App)
  // }
})

首先：import Vue from 'vue'这行代码是引入vue，我们点进入，发现引入的是index.t.ts这么一个文件，这其实是精简后的vue.js。

 

 

vue.js和精简版的js的区别：vue.js是完整的，包含vue核心和模板解析器，而这个精简版的是不包含模板解析器的。

由于精简版的不包含模板解析器，所以templete标签不能使用

如果是完整的vue.js，那么new Vue可以使用templete

new Vue({
    template:'<App></App>',
    el:'#root',
    components:{
        App
    }
})

而精简版的不能使用templete，所以有了render函数，这个函数有一个参数是createElement函数，可以指定元素内容

new Vue({
  el:'#app',
  // render函数功能：将App组件放入容器中
  // 简写形式
  render: h => h(App),
  // 完整形式
  // render(createElement){
  //   return createElement(App)
  // }
})

 

7 webpack配置

7.1 查看配置信息

　　vue隐藏了所有的ebpack配置，若想查看，可执行命令，可以生成一个output.js文件，里面就是配置信息，这个文件只是给我们看的，修改了里面的信息不会起作用的

vue inspect > output.js

 我们看见文件是报错的，把这个对象给一个变量就好了，加上const a = 即可

 

7.2 修改配置

　　官网：https://cli.vuejs.org/zh/config/#vue-config-js

　　在项目的根目录创建一个文件：vue.config.js

　　在里面可以进行配置，这里的配置会被加载，覆盖默认配置