vue 使用脚手架 vue-cli 创建项目 的两种方式

本博客内容

vue官网

1. 预先安装准备
2. 第一种方式 vue init webpack 项目名 （这是 vue-cli3.0 版以前的创建方式）
3. 第二种方式创建项目 vue create 项目名（vue-cli 3.0 方式）
4. vue cli 2.0 和 vli 3.0 区别简析
5. 名词解释 什么是Webpack

预先安装准备

1. 开启命令行（如果有问题，使用管理员打开）
   npm install webpack -g // webpack 后面有解释
   npm install -g @vue/cli // Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你可通过 npm uninstall -g vue-cli 或 yarn global remove vue-cli 卸载它。

第一种方式 vue init webpack 项目名 （这是 vue-cli3.0 版以前的创建方式）

vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

1. 进入想建立目录的位置，我的在桌面，如下
   

2. 输入 vue init webpack my-project1
   
   回车是选择默认选项
   
   详细解释
   

3. 创建完成
   

4. 进入项目 并运行
   

结果：

第二种方式创建项目 vue create 项目名（vue-cli 3.0 方式）

1. 输入 vue-create myproject2
   如果不是vue-cli3.0 会出现如下情况 ，根据提示进行下一步
   

2. 然后出现 如下界面，选择哪个预置（预置里面包括自己想加入的插件），这里我选择 Manually select features(手动选择配置）
   

3. 选择要添加的插件（数字键对应第几行的插件选择，*代表选择）
   

4. 我选择的插件选项，（回车进行下一步）
   
   具体信息看这篇文章
   vue-cli3.0 创建项目

5. 一般配置信息放置在 package.json
   

6. 将此模板存 起来以后使用 （我选择 y ，然后预置为 my-choose,再次创建项目是就会出现 此模板）
   

7. 创建成功：（继续输入对应的命令，然后根据提示在浏览器打开即可）
   

8. vue-cli 3.0 还可以使用vue ui 此命令来进行资源控制，在控制台输入 vue ui ，效果如下
   

vue cli 2.0 和 vli 3.0 区别简析

浅谈vue-cli 3 和 vue-cli 2的区别！！！

名词解释

什么是Webpack

1. WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
2. Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。