Vue开发常用命令

1.创建vue脚手架项目

vue init webpack 项目名

2.axios

1. 安装axios

   npm install axios --save-dev

2. 配置main.js中引入axios

   import axios from 'axios';
   
   Vue.prototype.$http=axios;

3. 使用axios
   在需要发送异步请求的位置:

   this.$http.get(
           "url"
         )
         .then(res => {
           
         });

3.ElementUI

1. 安装ElementUI

   npm i element-ui -S

2. 配置main.js中引入ElementUI

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   //在vue脚手架中使用elementui
   Vue.use(ElementUI)

4.项目打包

1. 打包
   在项目根目录中执行如下命令:

   npm run build

   注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

2. 打包之后当前项目中变化
   在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

3. 与后端合并部署
   复制dist目录到Java工程resource下的static文件夹,index.html中修改路径

   <link href=/dist/static/css/app...../>
   ...
   <script type=text/javascript src=/dist/static/js/ma....></script>
   ...

4. 访问项目
   浏览器访问: http://localhost:8080/dist/index.html