vue1- vue2单文件组件工程创建及整合ElementUI

• 前提：
  已安装nodejs

1、去掉命令行编辑模式

• 防止命令行窗口误点击停止下载进入编辑模式

  
  
  
  
  
  

2、 安装 webpack

• 打包工具，支持es6转es5（浏览器兼容性更好）
  npm install webpack -g
  
  

3、安装 vue-cli

npm install -g @vue/cli-init

4、新建工程目录文件夹 front-pj

5、新建vue工程 vue-demo

• 进入上一步骤新建的工程目录，执行cmd：

vue init webpack vue-demo

• 注： 若是出现提示vue不是内部或者外部文件命令，则需要到node.js下查看是否有vue.cmd文件，参照：

https://blog.csdn.net/SuperstarSteven/article/details/107465182

6、运行项目

• 依次执行上图两条命令，成功：

7、工程目录介绍

build:
和webpack打包相关
config:
项目配置信息，关注项目配置文件 index.js
node_modules:
存放根据package.json下载的项目依赖包
src:
开发人员的开发目录，关注项目入口文件main.js ，app.vue
static:
静态文件目录，如图片等

• demo
  创建单组件文件test.vue

  
  
  
  
  

  配置路由：

  
  
  
  
  测试效果：
  
  

8 整合ElementUI

参照官网：
https://element.eleme.cn/#/zh-CN/component/quickstart