vue的webpack打包步骤

最新推荐文章于 2024-06-07 17:03:35 发布

转载最新推荐文章于 2024-06-07 17:03:35 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lk1186578324/p/6946993.html

文章标签：

#javascript #webpack #ViewUI

本文详细介绍如何使用Vue CLI搭建项目环境，包括全局安装CLI工具、创建项目文件夹、配置跨域访问及路由设置等步骤。

1，安装全局cli；npm install -g vue-cli
2，建文件夹;vue init webpack my-project : my-project为我自己的项目文件名,下载时一个yes其他都是NO
3，在项目中npm install下载相关模块
4，得到模块后npm start 启动，然后进入8080端口，默认为vue官方页面，并且自动弹出首页，
需要进入config文件，将里面的index.js 的autoOpenBrowser改为false，则不会再自动弹出网页。
5，可以删除自带首页，即router里面的App.vue文件，和components下面的Hello.vue文件
6，在components文件夹下面加入自己的项目文件，在router文件夹下面的index.js里面修改需要引入的模块，并且配置加载路径，默认为哈希路径，可以在router文件下面添加mode: 'history',改为绝对路径
7，在config的index.js里面配置跨域访问路径
proxyTable: {
'*' : {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
filter: function (pathname, req) {
return pathname.match('^(/admin)|(/student)|(/getSession)|(/logout)');
}
}
},
8,针对里面的css写法则完全按照css的方式写，在<style>里面加入scoped属性，则会限制css样式不受外界污染。