一步步创建vue-element-admin框架实现001-创建cli3项目

一步步创建vue-element-admin框架实现001-创建cli3项目

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

使用cli3创建工程，vue create my-vue-element-admin

1.有三个选择：

• Default ([Vue 2] babel, eslint) （创建vue2.x）

• Default (Vue 3 Preview) ([Vue 3] babel, eslint)（创建vue3.x）

• Manually select features（手动选择功能）

我们选择Manually select features，自己配置

Vue CLI v4.5.7

? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

2.选择需要的环境，上下选择，空格选择或取消，我这边只选择Choose Vue version和Babel，其他功能自己慢慢自己安装就好

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

3.选择版本Choose Vue version：2.x

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

4.选择Babel：In dedicated config files，把这个配置独立出来，不整合在package.json文件

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

5.还有是否保存模板，就no就好，然后回车就会开始创建工程了

Save this as a preset for future projects? No

6.安装成功，整个安装脚本

Vue CLI v4.5.7

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel
? Choose a version of Vue.js that you want to start the project with 2.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.7
✨  Creating project in D:\vuework\my-vue-element-admin.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> core-js@3.13.1 postinstall D:\vuework\my-vue-element-admin\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\vuework\my-vue-element-admin\node_modules\ejs
> node ./postinstall.js

added 1207 packages from 639 contributors in 104.96s

68 packages are looking for funding
  run `npm fund` for details

🚀  Invoking generators...
📦  Installing additional dependencies...

added 3 packages from 1 contributor in 10.754s

68 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-vue-element-admin.
👉  Get started with the following commands:

 $ cd my-vue-element-admin
 $ npm run serve

7.运行项目

 $ cd my-vue-element-admin
 $ npm run serve
 #-----------------------------------------------------运行成功-----------------------------------------------------------------------
  DONE  Compiled successfully in 1856ms                                                       
  App running at:
  - Local:   http://localhost:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.

8.浏览器直接访问：http://localhost:8080/

创建成功