使用Vue脚手架进行模块化开发

文章目录

• 一、安装项目打包工具
• 二、安装Vue命令行程序
• 三、初始化vue项目
• 四、启动 vue 项目
• 五、模块化开发
• • 1.项目结构
  • 2.Vue单文件组件
  
  
• 六、Vue整合ElementUI快速开发
• • 1.安装npm
  • 2.引入完整Element
  • 3.使用Element-UI搭建后台管理系统页面
  • 4.添加用户代码片段
  
  

全局安装 webpack

npm install webpack -g


全局安装 vue 脚手架

npm install -g @vue/cli-init

三、初始化vue项目

vue 脚手架使用 webpack 模板初始化一个 appname 项目

vue init webpack appname


注意：若vue安装失败，可以移步，进行vue的重新安装。

npm run dev


此时访问8080端口，出现下图即代表搭建成功。

1.项目结构

2.Vue单文件组件

访问不同路径展示不同组件：编写不同的单文件组件并配置不同的路由即可。

可以在App.vue中使用router-link实现点击发送请求，进而切换视图的操作。

1.安装npm

npm i element-ui


2.引入完整Element

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


3.使用Element-UI搭建后台管理系统页面

App.vue