01. Vue-cli Basic

Official Tutorial

Basic Infomation

Info

Vue 构建的时候分为两种类型

1. runtime-only: 代码中不可以有任何的template
2. runtime-compile: 代码中允许存在template，因为存在compiler可编译tempalte

若使用webpack碰到需要编译，但报错使用runtime-only版本，可在webpack配置文件中增加如下配置

  resolve: {
    //配置可以省略的文件扩展名
		extentions:['.js', '.css', '.vue'],
    //解决runtime-only无法处理模板问题（方法：直接指定含有compiler的vue版本）
		alias: {
			'vue$': 'vue/dist/vue.esm.js'
		}
	}

el和template的关系：若同时存在，vue会将template中所有内容替换至el中所指定的部分。

What's Vue CLI

什么是脚手架，即Vue CLI (Command-Line Interface)。CLI可以快速高效生成Vue开发环境及对应的webpack配置信息。

使用套件要求：

1. nodejs
2. webpack
   #由于其需要生成很多webpack相关配置，必须依赖webpack相关内容
   npm install webpack -g
3. vue-cli

   #安装脚手架3
   npm install -g  @vue/cli
   #在3基础上使用模板即可使用脚手架2
   npm install -g @vue/cli-init
   
   #安装脚手架2
   npm install -g vue

Create Project

vue-cli 2

# vue init now works exactly the same as vue-cli@2.x
vue init webpack my-project

vue-cli 3

vue create myproject