vuecli学习笔记

Vue CLI

CLI:Command-Line Interface，命令行界面， 俗称为Vue的脚手架

Vue CLI是一个Vue官方发布的vue.js项目脚手架

使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置

1、VueCLI的使用前提

1.1、-Node

使用node -v和npm -v进行版本是否安装node和npm检测

node环境要求为8.9及以上

1.2、-webpack

需先安装webpack

//全局安装
npm install webpack -g

2、安装Vue CLI

npm install -g @vue/cli
//默认安装最新版本

//如果想同时使用cli2和cli3
//拉取2.x版本
npm install -g @vue/cli-init

3、初始化项目

注意：项目名不要使用中文

3.1、Vue CLI2初始化项目

//vue init webpack 项目名
vue init webpack my-project


// Project name 项目名称，一般与项目文件夹名称保持一致
Project name my-project 

//Project description 项目描述
Project description my vuecli2 test

//作者
Author	

//构建项目方式
Vue build(Use arrow keys)
1、Runtime + Compiler	//简单，但内存较大	入门推荐
2、Runtime-noly	

//是否安装路由
Install vue-router?(Y/n)  

// 是否使用ESLint对js进行强制限制/规范  （若没有要求，可不限制/规范
Use ESLint to lint your code?(Y/n)   

//上方选择YES后
//选择ESLint规范
Pick an ESLint preset
Standard	//标准规范	（推荐
Airbnb		//Airbnb规范
none		//自定义规范

//是否启用单元测试  （不推荐启用
Set up unit tests?(Y/n)

//端到端测试		   (一般不启用)
Setup e2e tests with Nightwatch?(Y/n)

//选择项目管理工具
Should we run 'npm install' for you after the project has been created?
Yes,use NPM			//推荐npm
Yse,use Yarn
No,I will handle that myself

提示：若构建项目时使用的eslint，但后期不需要，可在根目录的config文件夹中的index.js中将useEslint修改

 useEslint: true,	//启用eslint
 useEslint: false,	//停用eslint

3.2.1、runtime+compiler与runtime-only的区别

区别存在与入口文件–mian.js

//runtime+compiler
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})


//runtime-only
new Vue({
  el: '#app',
  render: h => h(App)
  
    ||
    ||		render的箭头函数转化为es5时的样子
    ||
    \/
  
  render: function(){
  	return h(App)  
  }
})

渲染区别

//vue渲染过程
//runtime+compiler
			解析					  编译
teamplate---------> ast(抽象语法树)--------->render-------->virtual dom--------->UI

//runtime-noly
//编译后代码更少，性能更高	
render-------->virtual dom--------->UI

//runtime-only中不包含负责template解析和ast编译的代码
//runtime-only的.vue文件中的template是由谁处理的？
//是由webpack中的vue-template-compiler进行的处理

runtime+compiler页可使用render进行渲染

//runtime+compiler
new Vue({
  el: '#app',
  
  render:function(createElement){
        //1、普通用法
        // createElement('标签',{标签属性},[标签内容])
        return createElement(
            'h2',
            {class:'box'},
            ["Hello World",createElement('button',['按钮'])])
  		//2、传入组件对象
      return createElement(cpn)
  }
})

3.2、Vue CLI3初始化项目

//vue create 项目名
vue create my-project

//选择配置
Please pick a preset:(Use arrow keys)
Default([Vue 2] babel,eslint)					//vue2
Default(Vue 3 Preview)([Vue 3] babel,eslint)	//vue3预览版
Manually select features						//手动选择特性

//若选择手动后(空格选择)
check the features needed for your project:
Choose Vue version
Babel								//必选项
Typescript
Progressive web App (PwA) Support	//
Router
Vuex
CSS Pre-processors					//css预处理
Linter / Formatter					//eslint（js强制规范
Unit Testing
E2E Testing

//对于Babel，ESLint, etc的配置信息放在哪里
where do you prefer placing config for Babel，ESLint, etc.? (Use arrow keys)
In dedicated config files		//放在单独的文件	（推荐
In package.json					//放在package.json

//是否将此保存为将来项目的预设？
Save this as a preset for future projects? (y/N)
//选择yes后
Save preset as:' 自定义预设名'
//之后在创建项目的Please pick a preset环节中会显示保持的预设

//选择安装依赖项时要使用的包管理器：		（cli4没有此选项
Pick the package manager to use when installing dependencies:
Use Yarn
Use NPM

3.2.1、Vuecli3配置文件的查看和修改

//在终端执行vue ui启动本地服务
vue ui

//在页面中点击--导入
//进入项目文件夹
//点击--导入这个文件夹

若有自定义的配置

在根目录新建vue.config.js

//vue.config.js
module.exports={
    ....//自定义的配置
}

4、es6知识回顾

4.1、箭头函数

定义函数的方式

1、function

const aaa= function(){
    
}

2.对象字面量

const obj ={
    bbb:function(){
        
    }
    bbb(){
        
    }
}

3、箭头函数

const ccc=(参数类别)=>{
    
}

1、参数问题
1.1、放入两个参数
const sum = (num1,num2)=>{
	return num1+num2
}
1.2、放入一个参数
const power =(num) ={
    return num * num
}
const power =num ={	//()可省略
    return num * num
}

2、函数中
2.1、函数代码块中有多行代码时
const aaa= ()=>{
    console.log('abc')
    console.log('cba')
}
2.2、函数代码块中有一行代码时
const add=(num1 , num2) => {
    return num1 + num2
}
//只有一行代码时，若有返回值，则会执行后自动将结果进行返回；
//若没有返回值，则在执行后返回undefined
const add=(num1 , num2) => num1 + num2

4.1.2、箭头函数的this

箭头函数中的this引用的是最近作用域的this

向外层作用域中，一层层查找this，只到有this的定义

5、vue项目执行npm run build的过程

vuecli3中的public文件夹相当于vuecli2中的static文件夹

这两个文件夹不会被webpack打包， 必须使用绝对路径引用这些文件