基于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    参考：Node.js 安装及环境配置之 Windows 篇

2.1.2 Mac安装 Nodejs

•   安装安装brew参考：https://www.jianshu.com/p/8a2572fe60be
•   用brew安装node brew install node
•   参考：MAC 安装BREW跟NODE

2.2VScode下载 

2.2.1 下载：https://code.visualstudio.com/

2.2.2 安装插件

• Auto Close Tag 
• Auto Rename Tag
• Beautify
• Prettier
• Vetur (vue必备)
• VueHelper
• Vue 2 Snippets

参考：https://www.cnblogs.com/clwydjgs/p/10078065.html

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

package.json文件说明解释

4.2.node_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地址

https://github.com/alvn1213/vue-demo

 

end~