首页 > 其他 > 详细

Vue+Element 后台管理系统 项目实战(一)

时间:2020-04-21 00:17:14      阅读:157      评论:0      收藏:0      [点我收藏+]

 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.

 

页面效果:

技术分享图片

 

项目结构:

技术分享图片

 

Vue+Element 后台管理系统 项目实战(一)

原文:https://www.cnblogs.com/hrvyzou/p/12741542.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!