基于Vue+element-ui快速搭建前台页⾯（PC端）
1.Node.js基础知识
Node.js 是⼀个基于 Chrome V8 引擎的 JavaScript 运⾏环境。 Node.js 使⽤了⼀个事件驱动、⾮阻塞式 I/O 的模型。
Node 是⼀个让 JavaScript 运⾏在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语⾔平起平坐的脚本语⾔。
Node对⼀些特殊⽤例进⾏优化，提供替代的API，使得V8在⾮浏览器环境下运⾏得更好。V8引擎执⾏Javascript的速度⾮常快，性能⾮常好。Node是⼀个基于Chrome JavaScript运⾏时建⽴的平台，⽤于⽅便地搭建响应速度快、易于扩展的⽹络应⽤。Node 使⽤事件驱动，⾮阻塞I/O 模型⽽得以轻量和⾼效，⾮常适合在分布式设备上运⾏数据密集型的实时应⽤。
2.⼯具安装
2.1nodejs 安装
2.1.1  window安装Nodejs    参考：
2.1.2 Mac安装 Nodejs
安装安rew参考：
⽤brew安装node brew install node
参考：
2.2VScode下载
2.2.1 下载：
2.2.2 安装插件
Auto Close Tag
Auto Rename Tag
Beautify
Prettier
Vetur (vue必备)
VueHelper
Vue 2 Snippets
elementui登录界面参考：
3.项⽬创建
3.1.全局安装vue-cli脚⼿架
npm install -g vue-cli
3.2.创建项⽬
mkdir my-project && cd my-project
vue init webpack
3.3.安装element-ui
npm i element-ui
3.4.安装element-ui安装node-sass
npm install --save-dev sass-loader node-sass
3.5.安装axis (后端请求）
npm install axios
3.6.组件安装
npm install
3.7.启动项⽬
npm run dev
3.8.查看页⾯
4.代码结构说明
4.1.package.json
de_modules
npm install 执⾏完毕后，我们可以在 nodemodules 中看到所有依赖的包
4.3.src⽬录结构
assets: 放置静态资源，包括公共的 css 、 js 、字体⽂件、img 图⽚⽂件等。
components: 放置公共模块组件/复⽤组件，如对话框，⽤户信息组件；
pages: 放置页⾯组件。通常是这⾥，引⼊通⽤模块组件，加⼊逻辑，形成完整的页⾯；
router: 放置路由设置⽂件，指定路由对应的页⾯；
store: 放置 vuex 需要的 state、mutations 等；
App.vue: ⼊⼝组件，pages ⾥的组件会被插⼊此组件中，此组件再插⼊ index.html ⽂件⾥，形成单页⾯应⽤；main.js: ⼊⼝ js ⽂件，影响全局，作⽤是引⼊全局使⽤的库、公共的样式和⽅法、设置路由等。
5.创建2个页⾯（我的任务和团队任务）
6.Demo地址end~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。