Vue-cli

　　Vue-cli可视化：

一：安装Vue-cli自动化工具：

1. 任一命令安装这个新的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli
2. 你还可以用这个命令来检查其版本是否正确： 
vue --version

 

二：创建vue-cli项目：

1.创建vue文件
vue create testapp
​
2.选择配置：
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

4.选择是否单独创建出一个文件或者把所有的配置放到一个文件当中：

In dedicated config files

In package.json

 

5.打开vscode，并打开testapp项目终端：

npm run serve这个时候就开启了热加载服务器

 

6.在vue文件当中的src->app.vue中修改，完了保存，服务器自然而然就创建出来了：

 

三：创建使用：build

1退出：ctrl+C

2.打开终端：npm run build

3.会出现一个dist的文件：这个文件是最终呈现在网页上面的

 

四：各个文件的作用：

dist：里面是各种html+css+js压缩呈现在页面上的内容

public：用来书写组件需要的主页面：index.html

src:里面就是配置与后台

 

五：vue-cli可视化操作

淦，你为什么不早说有这个可视化的？？？？？

 

1.返回上级终端：cd ../

2.使用ui可视化：vue ui