基于脚手架构建vue项目

vue脚手架

介绍

​ Vue-cli 是 Vue 官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

功能

• 统一的目录结构

• 本地调试

• 热部署

• 单元测试

• 集成打包上线

• 依赖环境：NodeJS

项目结构

创建脚手架

npm install -g @vue/cli

图形化创建vue

vue ui

命令行创建

vue create 项目名

注：

如果图形化没有npm模块，在vscode中点击根目录，鼠标右键后选择npm即可打开

vue开发流程

Element

• 定义：Element 是由饿了么团队研发的，基于 Vue 2.0 的桌面端组件库，面向开发者、设计师和产品经理。
• 介绍：里面提供的大量已编写好的组件，如按钮，表格，整体布局等内容，直接复制即可使用
• 官网：https://element.eleme.cn/#/zh-CN/listener

安装

npm install element-ui@2.15.3

在main.js中导入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

注：

导入的组件内容放在对应的模版部分，如果想让其显示，在app.vue模版部分加入对应名称

例如：

如果放组件名为ElemenView.vue

对用app.vue模版中内容为

<elment-view></elment-view>

如果名称为AbbbView.vue

对用app.vue模版中内容为

<abbb-view></abbb-view>

Vue路由

介绍：Vue Router 是 Vue 的官方路由，用于实现单页应用（SPA）的页面路由跳转与组件渲染管理。

组成：

• VueRouter：路由器类，负责根据路由请求在路由视图中动态渲染选中的组件，是路由功能的核心管理类。
• ：请求链接组件，在浏览器中会被解析为<a>标签，用于触发路由跳转，可实现无刷新的页面导航。
• ：动态视图组件，用于渲染展示与当前路由路径对应的组件，是路由组件的渲染出口。

app.vue模版中直接加入即可生效

<router-view><router-view>