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.
页面效果:
项目结构: