vue-cli 3.0 安装和创建项目教程

2018年07月18日 10:46:34 Jorrci 阅读数：3030

使用前我们先了解下3.0较2.0有哪些区别

3.0 新加入了 TypeScript 以及 PWA 的支持

部分命令发生了变化：

下载安装  npm install -g vue@cli

删除了vue list

创建项目   vue create

启动项目   npm run serve

默认项目目录结构也发生了变化：

移除了配置文件目录，config和build文件夹

移除了static文件夹，新增public文件夹，并且index.html移动到public中

在src文件夹中新增了views文件夹，用于分类 视图组件 和 公共组件

下面进入正题，进行安装和创建项目

首先  安装npm3.0

npm install -g vue@cli

下一步  创建项目文件

vue create projectname//项目名

下一步  选择快捷式安装配置

前面的是你之前安装的项目配置，第二个是默认配置，最后一个是自行配置，建议选最后一个

下一步  自行选择安装配置

这个自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定

Babel，转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等

TypeScript，新增的选项卡

PWA，模拟原生app，渐进式网络应用程序

路由

vuex管理模式

css预处理语言

代码规范

组件单元测试

端对端测试，模拟用户真实场景

下一步  选择css预处理语言

下一步  选择代码规范配置

只进行报错提醒；

不严谨模式；

正常模式；

严格模式；

下一步  是否保存当前配置信息

选择第一个，下次创建项目就会有本次的配置出现供你选择

下一步  选择babel,postcss,eslint配置文件存放位置

第一个方独立文件夹里，第二个放package.json里，建议选第一个

下一步  填写项目描述

然后就开始创建项目，下载依赖

等进度条完成，项目就创建好了

最后我们开始进入项目根目录，运行项目试试

cdD:\test\test//进入你的项目根目录，或在你项目根目录shift+右键，点击在此处打开命令窗口

npm run serve  //运行项目

参考文档：https://cli.vuejs.org/   Vue CLI 3 的官方说明