Vue22 VueCli 脚手架
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 脚手架的更多相关文章
- vue-cli 脚手架 安装
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
- mintUI配合vue2.0,webpack，vue-cli脚手架从零搭建
步骤说明: 1.确保安装了vue-cli 安装:cnpm install vue-cli -g 验证版本:vue --version 2.生成项目模板: vue init webpack-simple ...
- 前端MVC Vue2学习总结（七）——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...
- 改造 vue-cli 脚手架
改造 vue-cli 脚手架 注意,这里使用的 vue-cli 的版本为 2.8.2,不同版本的 vue-cli 可能会有些许不一样. 一.配置多页面 项目开发目录: 需要注意一点,每个页面的文件夹命 ...
- vue学习记录①（vue-cli脚手架构建项目结构）
我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win ...
- 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 ...
- Vue2.0使用vue-cli脚手架搭建
一:安装node.js Node.js官网:https://nodejs.org/en/download/ 选择相应的版本即可安装 通过node自带的npm包管理工具 二.安装依赖 安装依赖:npm ...
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
// 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = req ...
- 安装vue-cli脚手架构建工具
vue安装 1.vue安装: $ cnpm install vue 2.安装vue-cli脚手架构建工具: # 全局安装 vue-cli $ cnpm install --global vue-cli ...
- 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...
随机推荐
- Enum.Parse的使用
Enum的转换,用Enum.Parse() Enum.Parse()方法.这个方法带3个参数,第一个参数是要使用的枚举类型.其语法是关键字typeof后跟放在括号中的枚举类名.第二个参数是要转换的字符 ...
- ThinkPhp5 自定义异常处理类
在项目的开发过程中异常抛出尤为重要不仅能够做出友好提示帮助掩盖我们伟大的程序员们尴尬的瞬间,还能做到提示开发人员代码白编写的错误,下面进行自定义异常抛出类,纯属个人理解,希望大家指正 首先在框架中我们 ...
- Java—猜数字
package cn.day03.demo01; import java.util.Random; import java.util.Scanner; public class RandomGame ...
- UBOOT编译--- UBOOT的$(version_h) $(timestamp_h)(七)
1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 概述 在编译uboot的过程中,有两个特别的依赖version_h 和 timestamp_h,它们定义 ...
- Spring Boot 多数据源配置
第一种方式: AbstractRoutingDataSource 1.1. 手动切换数据源 application.properties # Order # 如果用Druid作为数据源,应该用url属 ...
- psutil.AccessDenied: psutil.AccessDenied
解决办法 import psutil for proc in psutil.process_iter(): try: print(proc.name()) except (psutil.NoSuchP ...
- 4.11：Storm之WordCount
〇.概述 1.拓扑结构 2.目标 使用storm进行计数实验. 一.启动服务 在网页中输入:http://localhost:8081可以查看storm的相关信息. 二.kafka操作 终端中输入 ...
- Linux通过脚本实现多台主机统一部署
该脚本分成三部分,一部分是获取信息的脚本:getInfo.sh 一个是main脚本:main.sh.一个是ssh连接主机脚本:sshing.sh main.sh #是否检查主机是否存活host_che ...
- 你的项目使用Optional了吗？
1.基本概念 java.util.Optional<T>类本质上就是一个容器,该容器的数值可以是空代表一个值不存在,也可以是非空代表一个值存在. 2.获取对象 2.1 相关方法 2.2 案 ...
- Jmeter之随机变量元件与用户自定义变量元件区别及使用
用随机变量(random variable)与用户自定义变量(User defined variables)的区别: 随机变量:在同个线程或者不同线程时,每个次循环执行时值都会重新生成 用户自定义变量 ...