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

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

Vue22 VueCli 脚手架的更多相关文章

  1. vue-cli 脚手架 安装

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

  2. mintUI配合vue2.0,webpack，vue-cli脚手架从零搭建

    步骤说明: 1.确保安装了vue-cli 安装:cnpm install vue-cli -g 验证版本:vue --version 2.生成项目模板: vue init webpack-simple ...

  3. 前端MVC Vue2学习总结（七）——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...

  4. 改造 vue-cli 脚手架

    改造 vue-cli 脚手架 注意,这里使用的 vue-cli 的版本为 2.8.2,不同版本的 vue-cli 可能会有些许不一样. 一.配置多页面 项目开发目录: 需要注意一点,每个页面的文件夹命 ...

  5. vue学习记录①（vue-cli脚手架构建项目结构）

    我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...

  6. vue-cli 脚手架 Command Line Interface

    mac sudo npm install -g nrm sudo npm config -g set unsafe-perm sudo npm install webpack@3.0.0 -g sud ...

  7. Vue2.0使用vue-cli脚手架搭建

    一:安装node.js Node.js官网:https://nodejs.org/en/download/ 选择相应的版本即可安装 通过node自带的npm包管理工具 二.安装依赖 安装依赖:npm ...

  8. vue-cli脚手架build目录中的webpack.prod.conf.js配置文件

    // 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = req ...

  9. 安装vue-cli脚手架构建工具

    vue安装 1.vue安装: $ cnpm install vue 2.安装vue-cli脚手架构建工具: # 全局安装 vue-cli $ cnpm install --global vue-cli ...

  10. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

随机推荐

  1. 使用kubeadm方式搭建K8S集群

    使用kubeadm方式搭建K8S集群 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Ma ...

  2. golang面向对象

    一.方法 1.方法是作用在指定的数据类型上,和指定的数据类型绑定,因此自定义类型都可以有方法,而不仅仅是struct: 2.方法的申明和格式调用: package main import ( &quo ...

  3. VsCode搭建一个React项目

    安装Node.js 使用 npm -v检查安装成功 目前的 node 中都会自带 npm 所以不需要重新下载 直接切换至淘宝镜像即可 1.临时使用 :npm --registry https://re ...

  4. RocketMQ系列-搭建Namesrv源码调试环境

    RocketMQ系列-搭建Namesrv源码调试环境 在学习任何一个技术框架的时候,我们通常都是先了解是什么,有什么作用.解决什么问题.设计亮点和设计思想是什么:当然对于技术学习上来说,这只是纸上谈兵 ...

  5. 【RocketMQ】主从同步实现原理

    主从同步的实现逻辑主要在HAService中,在DefaultMessageStore的构造函数中,对HAService进行了实例化,并在start方法中,启动了HAService: public c ...

  6. 基于pyecharts的中医药知识图谱可视化

    基于pyecharts的中医药知识图谱可视化 关键词: pyecharts:可视化:中医药知识图谱 摘要: 数据可视化是一种直观展示数据结果和变化情况的方法,可视化有助于知识发现与应用.Neo4j数据 ...

  7. 使用sanic框架实现分布式爬虫

    bee_server.py from sanic import Sanic from sanic import response from urlpool import UrlPool #初始化url ...

  8. 【Java】从头开始学新的编程语言

    本文自用,Java入门笔记 -每个类都要在自己的单独文件中-我大为震撼 能运行的最小的Java程序要有main函数 public static void main(String[] args) (id ...

  9. 视图 触发器 事务 MVCC 存储过程 MySQL函数 MySQL流程控制 索引的数据结构 索引失效 慢查询优化explain 数据库设计三范式

    目录 视图 create view ... as 触发器 简介 创建触发器的语法 create trigger 触发器命名有一定的规律 临时修改SQL语句的结束符 delimiter 触发器的实际运用 ...

  10. 使用 System.Text.Json 时，如何处理 Dictionary 中 Key 为自定义类型的问题

    在使用 System.Text.Json 进行 JSON 序列化和反序列化操作时,我们会遇到一个问题:如何处理字典中的 Key 为自定义类型的问题. 背景说明 例如,我们有如下代码:   // 定义一 ...