傻瓜式安装创建vue-cli

先了解下vue全家桶：

• vue（整体架构）
• vuex（状态管理）
• vue-router（路由）
• vue_resource || axios（ajax请求）
• mint-UI(移动端UI框架库) || element-ui(饿了么公司PC端UI框架库)

再了解下vue和vue-cli的区别：

• vue是整套框架
• vue-cli是vue中的一个脚手架

一、安装

1. 安装

npm install -g @vue/cli   (我选这个)OR
yarn global add @vue/cli 

2. 检查安装成功

vue --version    //此时会出现版本号

二、创建

1. 到预备创建的项目目录下

G:     //举例子到G盘

2. 创建项目

vue create hello-world

在目录下可见该文件夹。

3. 预置

此时有三个选项，通过上下键选择。

• 选项一：vue2的默认预置
• 选项二：vue3的默认预置
• 选项三：手动选择预置【推荐】

后面的预置如下图蓝色，当然这因人而异。

其中，选项中有 () 的为多选项，按空格切换选择。

ps:

🕵️‍♂️关于Sass/SCSS（with node-sass）/（with dart-sass）
node-sass是自动编译实时的，dart-sass需要保存后才会生效。
但sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现

4.成功收尾

出现$符号的两句话，复制粘贴执行即可

💥成功了

ps:

🕵️‍♂️第二句不是 npm run serve 的小婊贝不要怕
因为安装的第一步有两个选择，
npm install -g @vue/cli 对应的执行 npm run serve
yarn global add @vue/cli 对应的执行 yarn serve

🕵️‍♂️若出现 npm ERR! missing script: serve
表紧张，看看文件夹下的package.json

"scripts": {
"start": "vue-cli-service serve",      //看这句，键不是serve
"build": "vue-cli-service build"}

所以可以用npm run start 启动执行。反之亦可。

三、VScode打开项目

—> 项目文件夹直接拖入。

开新终端 (ctrl+shift+`)

四、其他

1. Vue 完整版与不完整(runtime)版的区别

2. tenplate和render的使用方法

①视图
//完整版(template)
<template><div id="app">{{n}}<button @click="add">+1</button></div>
</template>
<script>
export default {name: 'App',data(){return { n:0 }},methods:{add(){  this.n += 1 }}
}
</script>//非完整版(render,main.js里导入demo)
import Vue from 'vue'
import demo from "./demo.vue"
new Vue({el: '#app',render: h => h(demo)
});

现在大多使用非完整版：

1. 用非完整版配合vue-loader+vue单文件，可以保证用户体验，其只支持h函数，用户下载的体积减小；
   vue-loader并不需要用户下载，在yarn build时已经执行，
2. 保证开发体验，在开发的时候可以把vue单文件中直接写html，再用loader转换，变成h函数

3. 在线项目搭建 codesandbox.io