VUE环境搭建&创建项目

一、环境确认

1、node.js
检查方法：运行窗口输入node -v，npm -v
若npm版本较低，输入npm -g install npm，更新至最新版本
2、cnpm
运行窗口输入npm install -g cnpm --registry=https://registry.npm.taobao.org
3、cnpm安装脚手架vue-cli
运行窗口输入cnpm install -g vue-cli
vue脚手架：它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等

二、构建项目

1、创建工作空间
2、新建vue项目，运行窗口输入vue init webpack javalsj-vue

image.png

输入相应内容回车，等待创建结束。

三、安装项目依赖

运行窗口，进入E:\workspaces\vue-workspace\javalsj-vue目录，输入cnpm install

image.png

四、运行项目

运行窗口，进入E:\workspaces\vue-workspace\javalsj-vue目录，输入npm run dev

image.png

运行成功后，在浏览器输入http://localhost:8080，会出现以下页面，说明vue安装配置成功

image.png

五、使用WebStorm打开VUE项目

六、VUE+Spring Boot整合

注：
1、npm run dev 遇到报错： Module build failed: Error: Couldn't find preset "es2015" relative to directory /

npm install babel-preset-es2015 --save-dev
执行这句指令后 安装好 babel-preset-es2015 就不会报错了 完美运行
npm run dev

2、container始终垂直布局，设置布局属性也不生效

进入main.js，导入import 'element-ui/lib/theme-chalk/index.css';

3、使用“./xxx/xxx”引入组件报错

检查引入和被引入组件是否都是在二级目录下，若是，则需在最前面写“..”