VUE3.0创建项目步骤详解(推荐)

这篇主要介绍下vue-cli3.0项目搭建

如果您还不了解vue2.x就请先看官方文档
文档地址:https://cn.vuejs.org/
这是vue3.0文档地址:https://v3.vuejs.org/guide/installation.html(也可以进入2.x版本选择3.0进入);
下面开始说安装步骤

一、介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：
CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 等命令）
CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 还有 inspect 命令）
CLI 插件库：给Vue 项目提供可选择功能的 npm 包 （ESLint 集成、unit和 e2e测试 ）

二、安装
1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步

 npm uninstall vue-cli -g //或者 yarn global remove vue-cli

2、Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+)
node中文官方下载地址：http://nodejs.cn/download/
3、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli了）

cnpm install -g @vue/cli //yarn global add @vue/cli

然后通过 vue -V 就可以查看vue版本号了

三、使用
1、vue create 搭建新项目
（1）新建项目：
*官方提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 winpty vue.cmd create hello-world 启动这个命令

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

具体操作如下：
首先，会提示你选择一个preset（预设）：
① 除最后两个，其他选项都是你此前保存的预设配置（如下图第一个“ my-default”是我之前保存的预设配置，如今便可以直接用了）：

如果没有配置保存过，则只有以下两个选项;
② default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
③ Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包
我们通过方向键选择Manually select features该选项进入下一步

这里面是一些选项包(空格选择或取消,键盘上下键控制上下);
下面是详解每一个的意思

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的选项
①是否使用history router：

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由
② css预处理器
主要为css解决浏览器兼容、简化CSS代码等

根据自己的需要选择(我这里选择的是Less)

③ ESLint：
提供一个插件化的javascript代码检测工具(选择你需要检查的项目)

④ 何时检测：

⑤ 如何存放配置(我这里选择package.json)

⑥ 是否保存本次配置（y:记录本次配置，然后需要你起个名; n：不记录本次配置）：

开始创建项目

等待的过程中 大家觉得我写的不错的 给我点个赞或者一键三连哈~~~

创建完成

然后 cd 进入你的项目 npm run serve运行vue项目;

vue3.0项目目录精简了许多,但还是和vue2.0有很多区别的，基本的用法变化不是特别大,今天这篇就讲到这里下篇分享一下vue3.0项目目录代表些什么意思,希望大家关注一波~我是前端小白,感谢欣赏