公司要对现有的架构进行升级改造，领导让我研究学习下vue。做为java开发，只能从零开始vue的学习。vue作为很火爆的前端框架非常值得学习的。下来对这几天的vue学习进行总结。在对vue有些了解后在结合以前的系统，觉得多页面的应用才是符合目前的需求。
一 环境搭建
1.安装 node
先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，安装完成之后，打开cmd开始输入命令。
node -v 查看 node版本(我安装的是以前已有的版本，大家去官网下载最新的版本。下载https://nodejs.org/en/。)
出现版本号则说明安装成功。
2.安装淘宝镜像
由于直接使用npm 比较慢。这里我们可以安装淘宝镜像。
输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装全局vue-cli 脚手架
输入命令：cnpm install --global vue-cli
或者 npm install -g vue-cli
输入命令 查看vue版本 : vue -V(大写V)
出现版本号则说明安装成功。
4.全局安装 webpack
输入命令 : cnpm install webpack -g
webpack -v 查看版本号
出现版本号则说明安装成功。
至此所有的准备工作都已做完
上面的都安装好了之后就可以创建我们的第一个vue项目了。作为新手的开心啊，终于可以开始vue的项目了
二 创建新的项目
首先为自己的项目找个存放的地方(相信大家都不会放在c盘吧)，
打开命令行切换到项目要放的路径。
使用命令 vue init webpack vue-my 搭建vue项目, “vue-my” 是你的项目名称。
前面这几步一直回车就好。
下来就第一步yes 其他都no。最后选择 Yes,use NPM 回车
耐心等待会，我们的vue项目正在搭建中
出现如上界面，项目搭建成功。
可以在config 下的 index.js 修改端口号,生成的目录结构如下图
输入命令 cd vue-my (切换到项目路径 )
输入命令 npm run dev 启动我们的项目
出现如上界面，项目已经成功启动，我们就可以访问了
到此一个简单的vue项目就搭建完成了
三 多页面应用搭建
1.调整项目目录
在项目目录中的src文件夹中新建一个pages和modules文件夹，在pages下创建index和test文件夹。
将assets和router，app.vue还有main.js都挪到新建的index文件夹下
接下来把项目根路径下的index.html也放到index文件夹下，并修改main.js为index.js .保证入口js文件和模板文件的名称是一致的。
调整完后
在test文件夹下新增test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
</head>
<body>
<div >
<p>这是个测试页面,测试多页面</p>
</div>
</body>
</html>
2.修改build下各配置文件
2.1.修改build文件中utils文件在文件中加入如下代码
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀 名的文件
var glob = require('glob')
// 页面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
// 用于做相应的merge处理
var merge = require('webpack-merge')
//多入口配置
// 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在
// 那么就作为入口处理
exports.entries = function() {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
//多页面输出配置
// 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中
exports.htmlPlugin = function() {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
let conf = {
// 模板来源
template: filePath,
// 文件名称
filename: filename + '.html',
// 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
2.2.修改build/webpack.base.conf.js的入口配置
找到
entry: {
app: './src/main.js'
},
修改为
entry: utils.entries(),
2.3.修改build文件夹中的webpack.dev.conf.js的配置
找到如下代码
2.4.修改build中的webpack.prod.conf.js文件
注释掉如下代码
2.5修改index下router 文件夹里的 index.js。添加
mode：‘history’，
base: '/dist',
mode: ‘history’, 去掉地址中不美观的#，所有路由中必须加入本页面文件名
注:(不使用history不仅为了去掉地址中的#,也是多页面能成功的关键，从失败中总结。)，
如下图。
Vue-router 中 mode 有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML。
简单介绍下两种模式：
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.12345.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
四 测试项目
可以复制pages下的index文件夹并命名为test2，将所有index命名的修改为test2保持一致。
在公共的组件HelloWorld中添加如下代码
重新启动项目 输入路径访问 http://localhost:8083/index.html
点击测试跳转也可以直接输入路径 http://localhost:8083/test.html 访问
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
