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）在创建项目的目录执行命令

  1.     vue create 项目名称

2）选择使用的vue版本

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

　　

3）初始化完成

　　

4）启动项目

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

  1. npm run serve

5) 访问项目

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

5 项目结构

　　我们使用vscode打开项目

　　

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

5.1 node_modules（项目依赖包）

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

　　安装依赖：

  1. npm i

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

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

  1. npm install vue-loader@11.1.4

5.2 index.html（主页）

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

  1. <!DOCTYPE html>
  2. <html lang="">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.  
  6.         <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.  
  9.         <!-- 开启移动端的理想端口 -->
  10.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12.         <!-- 配置页签图标 <%= BASE_URL %>是public所在路径，使用绝对路径 -->
  13.         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  14.  
  15.         <!-- 配置网页标题 -->
  16.         <title><%= htmlWebpackPlugin.options.title %></title>
  17.     </head>
  18.     <body>
  19.  
  20.           <!-- 当浏览器不支持js时，noscript中的元素就会被渲染 -->
  21.           <noscript>
  22.               <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  23.             </noscript>
  24.  
  25.         <!-- 容器 -->
  26.         <div id="app"></div>
  27.     </body>
  28. </html>

5.3 main.js（入口文件）

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

  1. // 该文件是整个项目的入口文件
  2.  
  3. import Vue from 'vue'                // 引入Vue  这里引入的是一个精简后的vue
  4. import App from './App.vue'    // 引入App组件，它是所有组件的父组件
  5.  
  6. Vue.config.productionTip = false
  7.  
  8. new Vue({
  9.     el:'#app',
  10.   render: h => h(App),            // render函数完成了这个功能：将App组件放入容器中
  11. })// .$mount('#app')

5.4 App.vue（根组件）

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

6 main.js中的render函数说明

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3.  
  4. Vue.config.productionTip = false
  5.  
  6. new Vue({
  7.   el:'#app',
  8.   // render函数功能：将App组件放入容器中
  9.   // 简写形式
  10.   render: h => h(App),
  11.   // 完整形式
  12.   // render(createElement){
  13.   //   return createElement(App)
  14.   // }
  15. })

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

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

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

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

  1. new Vue({
  2.     template:'<App></App>',
  3.     el:'#root',
  4.     components:{
  5.         App
  6.     }
  7. })

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

  1. new Vue({
  2.   el:'#app',
  3.   // render函数功能：将App组件放入容器中
  4.   // 简写形式
  5.   render: h => h(App),
  6.   // 完整形式
  7.   // render(createElement){
  8.   //   return createElement(App)
  9.   // }
  10. })

7 webpack配置

7.1 查看配置信息

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

  1. 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. hutool包的DateUtil工具类

    [首先引入依赖 ] <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-core& ...

  2. 删除redis对应key的缓存

    [root@zhyly-pre-002 ~]# /usr/local/redis/bin/redis-cli -p 6379 #登录redis 127.0.0.1:6379> auth 'Red ...

  3. IOT黑客入门篇之初探Badusb

    什么是Badusb?   BadUSB是一种使用带有恶意软件编程的USB设备的计算机安全攻击.例如,USB 闪存驱动器可以包含可编程的Intel 8051微控制器,该微控制器可以重新编程,将USB闪存 ...

  4. mindxdl--common--http_handler.go

    // Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common this file ...

  5. C# DataTable 虚拟Sql临时表，可以做一些处理

    /// <summary> /// 获取临时表-和数据库表一样的的表结构的才可以 /// </summary> /// <param name="SourceT ...

  6. combotree 的简单使用2

    上一次我在 combotree 的简单使用 中介绍了一种combotree的写法,不过有一个缺点,就是当输的结构非常大的时候,分级较多时,消耗内存的现象会比较严重,下面介绍的一种方法,使combotr ...

  7. js中数组追加和删除

    1.push  往后追加 let arr=[1,2,3,4];arr.push(5);console.log(arr);//得到[1,2,3,4,5] 2.unshift方法 往前追加 let arr ...

  8. 【十次方微服务后台开发】Day01：环境、缓存（吐槽）、ES搜索文章、MQ注册时发送验证码

    一.系统设计与工程搭建 1.需求分析 程序员的专属社交平台,包括头条.问答.活动.交友.吐槽.招聘 SpringBoot+SpringCloud+SpringMVC+SpringData全家桶架构 s ...

  9. 【JUC】信号量Semaphore详解

    欢迎关注专栏[JAVA并发] 欢迎关注个人公众号-- JAVA旭阳 前言 大家应该都用过synchronized 关键字加锁,用来保证某个时刻只允许一个线程运行.那么如果控制某个时刻允许指定数量的线程 ...

  10. 自研分布式高性能RPC框架及服务注册中心实践笔记【原创】【开源】

    痛点 1. bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级. 2. eureka已经闭源,且框架设计较重,同时引入eureka会自行引入较多spr ...