linux搭建vue脚手架项目,vue脚手架进行模块化开发和elementUI快速开发

1、vue模块开发(前提：需要安装node.js和npm环境)

1)安装webpack环境

打开cmd，输入一下命令(-g 是全局安装)：

npm install webpack -g

2)全局安装vue脚手架

输入一下命令：

npm install -g @vue/cli-init

如果通过 vue -V,提示vue不是内部命令也不是外部命令，网上都说是系统环境变量配置的问题，可是我的vue.cmd文件都没有生成，所以用npm install -g vue-cli 命令安装后就成功了。

3)初始化vue项目

vue init webpack appname: vue脚手架使用webpack模板初始化一个appname项目。比如我创建一个vue-demo的项目。

vue init webpack vue-demo

目录或文件

描述

bulid

里面是一些操作文件，使用npm run * 时执行的就是这里的文件。

config

配置文件，执行文件需要的配置信息。例如运行的端口，IP等等信息。

src

资源文件，所有的组件以及所用的图片都是在这个文件夹下放着，看一下这个文件夹都放了哪些东西。

assets

资源文件夹，放图片之类的资源。

components

组件文件夹，写的所有组件都放在这个文件夹下。

router

路由文件夹，这个决定了页面的跳转规则。

App.vue

应用组件，所有自己写的组件，都是在这个组件之上运行了。

main.js

webpack入口文件。

static

静态文件。

index.html

首页。

package.json

依赖包。

4)启动vue项目

项目的package.json中有scripts，代表我们能运行的命令。npm start = npm run dev: 启动项目。npm run build：将项目打包，我们来启动vue-demo的项目。

5)使用启动的默认端口访问，输入localhost:8080

2、整合elementUI快速开发

1)安装ElementUI

npm i element-ui -S

2)引入 Element

在 main.js 中导入以下内容

3)使用element的组件

比如单选框的使用。

页面显示

4)element的Container 布局容器

①、将官网的demo放入App.vue中

②、创建MyTable.vue并添加路由

③、点击用户列表和Hello菜单，跳转对应的路由。