用Vue-cli从头搭建项目

vue-cli ，vue项目脚手架的意思。通过一些命令行工具，帮你配置好项目开发运行，打包全过程，最后只关注你的逻辑代码部分。基于webpack，基本实现零配置。

首先准备一个空文件夹，打开命令行工具进入该空文件夹

1. 安装

npm install -g @vue/cli

查看是否安装成功

vue --version

出现版本号说明安装成功

2. 命令行创建项目

运行以下命令来创建一个新项目：

vue create hello-cli

 会出现如下提示框，可通过上下键选择

你可能只看到这个

原因是我在本地新建过项目会保留我的配置。

选择  Manually select features   然后回车（通过自定义项目不使用默认配置）

注意： 记住到了这步未完成配置之前不要回车、、、

babel 是把最新的代码兼容到当前浏览器都兼容的es5或者3   如果是用es6代码，那一定要选择

TypeScript  基于js的超集，说是另一门语言也不为过  如果想用那是必选的

Progressive Web App (PWA) Support     PWA的支持

Router 即 vue-router  vue官方推荐路由 肯定是要用

Vuex  vue的状态管理工具  要用

CSS Pre-processors   Css预处理语言的使用   使用，我要使用scss, 如果不用可以不选

Linter / Formatter  代码检查和格式化工具   主要为了团队配合开发使用

Unit Testing  单元测试  
  E2E Testing  E2E测试  

根据自己的选择 选择就按空格，全部选择完成，回车  继续

下边是我的选择

然后提示这个

是否使用css 组件系统  当然选择是

中间一些选择略过，展示下我的选择

个人倾向选择保存的时候检查。

选择单独文件生成

然后结束就会自动开始安装

选项越多安装越多。需要一点点时间。

证明安装成功

根据提示进入项目

cd hello-cli

运行项目

npm run serve

说明已经跑起来了

访问一下

成功。

看一下项目代码目录

不仅初始化了git仓库，还把项目需要的基本设定完成，非常给力了。

3. 可视化方式创建

这个更简单。

找一个文件夹 命令行进入

vue ui

然后就是等一会

正常会自动弹出页面，不不能，则手动输入上边的地址

出现这个页面。

因为我这是已经有创建过的项目。所以点击左上角下拉框箭头，选择vue 项目管理器

然后点击新建，选择一个文件夹

然后就是和命令行一样，下一步，下一步，按照你的选择完成项目创建