Vue+Element 后台管理系统 项目实战（一）

 Vue+Element 后台管理系统 项目实战（一）项目创建

本教程旨在记录个人学习历程，No thinking no coding!

项目创建：

主要命令：vue create vue-element-admin-demo

创建具体流程如下：

% vue --version
@vue/cli 4.3.1
% vue create vue-element-admin-demo

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with node-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No

Vue CLI v4.3.1
✨  Creating project in /Users/hrvy/Documents/vue-element-admin-demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...


success Saved lockfile.
✨  Done in 27.59s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 58.38s.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd vue-element-admin-demo
 $ yarn serve

 

项目运行：

主要命令：yarn serve

具体项目启动流程如下：

% cd vue-element-admin-demo 
% yarn serve

yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3102ms                                  23:25:54


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.101:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

 

页面效果：

 

项目结构：