vue-cli3.0创建vue项目

安装脚手架 npm install -g @vue/cli （这个是vue3的脚手架）
    安装完成后     输入 vue -V 检查安装是否成功
使用vue-cli3.0创建一个项目

1 使用命令方式创建一个项目

  例如 vue create 项目名

vue create maw //创建一个名为mzw的vue项目

点击回车后，就要你选择怎么生成项目

第一步

此处有两个选择：

默认配置 提供babel和eslint支持
自己手动去选择需要的配置

选择 default (babel, eslint)会自动生成一个vue项目
选择 Manually select features 需要自己进行配置（下图）

第二步

可以同过上下键更改选项，空格来中择，一般会选择手动的配置如下：

• Babel 主要是对es6语法转换成兼容的js （会默认选上）
• TypeScript 支持使用TypeScript语法来编写代码（如果你创建TS项目的话，才会手动选中）
• PWA PWA 支持
• Router 支持vue路由配置插件（一般都会手动选中）
• Vuex 支持vue程序状态管理模式 （一般都会手动选中）
• CSS Pre-processors 支持css预处理器 （一般都会手动选中）
• Linter / Formatter 支持代码风格检查和格式化 （会默认选选上）
• Unit Testing 单元测试* E2E Testing E2E测试

一般开发常见的项目，一般选择如下：

第三步

选择完毕后，回车

第四步

这里的意思是问你本次项目路由是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，选择N的话采用的是hash模式，这里我选择 n
hash模式和history模式的区别

第五步

这里是问你选择一种css预处理，我项目一般使用SASS，所以这块我选择第二个，项目使用less的话选择地三个，回车后：

第六步

这里是问你选择一种格式化代码方式，我用VSCode，所以一般选择 ESlint + Prettier,选择回车：

第七步

这里问你什么时候进行代码规则检测
Lint on save  保存的时候进行代码的检测
Lint and fix on commit  提交的时候进行代码的检测
一般会选择保存就检测，也就是Lint on save 选择回车：

第八步

这问将Babel,PostCSS,ESLint这些配置文件放哪
In dedicated config files 放在一个独立的文件里
In package.json 放在package.json文件里
通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个 点击回车：

第九步

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了，完成后如下图

第十步

根据提示，我们执行指令 cd vue-template 然后执行命令npm run serve 这样就开始启动项目了

这是打开 http://localhost:8082 ：

image.png

2 使用图形界面创建一个项目

  cmd运行命令

vue ui//打开UI页面

使用vue ui具体步骤