搭建vue环境,无非有以下目标(目录层次清楚了,项目架构和功能也就清楚了,前后端都是根据这个目标来):
1)创建一个基于node服务的vue框架环境,vue中webpack的使用;
2)配置路由和url访问:①配置单独模块页面;②配置公共模块页面;
3)配置公共js(区别:assets目录将会打包进入dist,而static不会,所以此处js应放入assets文件夹);
3-1)配置全局公共函数,并访问该函数
4)部署生产环境;
5)利用反向代理部署node服务器(这个本文简单涉及)。
# 创建一个基于node服务的vue框架环境
需要提前安装好node环境(下载地址为:https://nodejs.org/en/);
全局安装vue-cli脚手架:
# npm install --global vue-cli
安装vue项目:
# vue init webpack myvue
Vue build ==> 打包方式,回车即可;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
Use ESLint to lint your code ==> 是否需要 js 语法检测 ,选不需要检测n;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
# cd myvue
启动项目服务(开发环境)
# npm run dev
生成生产环境,myvue根目标生成dist文件夹,此文件夹就是打包以后的静态压缩项目资源,可以直接将dist文件部署到服务器而不再需要node编译:
# npm run build
# 配置路由和url访问:①配置单独模块页面;②配置公共模块页面;
新建目录和文件:
1. 如图新建pages单独模块放置的目录和文件;
2. 新建common公共模块的目录和文件;
在src/router/index.js里面配置注册页面和路由,全部代码如下:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
/*
* 引入公共js
* */
import {all} from '../assets/js/all.js'
/*
* 注册模块页面路由
* */
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/pages/home/home'
import Test from '@/components/pages/test/test'
/*
* 注册url访问路由
* http://localhost:8081/#/index
* */
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/index', // url访问地址
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/test',
name: 'test',
component: Test
},
]
})
-
注册公共模块,将common目录下的公共模块文件引入单独模块home里面:
<template>
<div class="home">
<!--公共组件-->
<com_head></com_head>
<!--开始内容-->
<div>
home-{{msg}}
</div>
<!--结束-内容-->
<!--公共组件-->
<com_foot></com_foot>
</div>
</template>
<script>
/*
* 注册公共模块
* */
import Foot from '@/components/common/foot'
import Head from '@/components/common/head'
export default {
name: "home",
data(){
return {
msg: "home模块"
}
},
methods: {
},
components: { // 注册公共组件
com_foot: Foot,
com_head: Head,
},
}
</script>
<style scoped>
.home{
color: red;
font-size: 20px;
}
</style>
如图:
# 配置公共js(区别:assets目录将会打包进入dist,而static不会,所以此处js应放入assets文件夹)
在assets文件夹新建如下:
all.js:
console.log("all");
export class all {
}
# 配置全局公共函数,并访问该函数
main.js里面定义函数访问接口,$符号为约定俗成,统一加:
Vue.prototype.$appName = function (name) { // 注意,用了Vue对象,引用等指针也应该是Vue
return name;
};
然后在子模块home.vue里面引用$appName。注意this指针指的最少是vue这个对象,不然会报错 $appName为定义 。如果指针不正确,可以和如下一样,定义一个全局vue指针对象all_this,初始化以后全局调用vue的指针。
let all_this; // 定义一个全局指针,负责全局prototype
export default {
name: "home",
data() {
return {
msg: "home模块"
}
},
methods: {},
beforeCreate: function () {
all_this = this; // 初始化指针
console.log(this.$appName("22222=="));
run();
},
created() {
all_this = this; // 初始化指针
console.log(all_this.$appName("33333=="));
}
}
function run() {
console.log(all_this.$appName("22222----"))
}
# 部署生产环境
运行
npm run build
创建dist文件,将dist文件部署在生产环境即可,不管是本地打包再上传到服务器还是在服务器打包,都可以。
dist/index.html文件默认js资源文件是根目录,如果你的域名不在更目录,请手动更换index.html里面的默认js资源文件路径。
-
如图:
路由访问,静态资源访问,公共模块,公共js,都成功!
# 反向代理:
一般是服务端环境有比如Apache+node环境,需要在Apache中设置反向代理比如8080端口来实现前端系统的访问。
你可参考教程https://github.com/fyonecon/quweiceshi
如下说明:
1.使用说明
在apache中配置httpd.conf,接口代理绑定8080端口并绑定域名,注意,域名绑定的是静态dist目录
Listen 80
加载转发模块 LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
<VirtualHost 39.108.245.11:80>
ServerName quwei.hhhh.com
DocumentRoot "/usr/local/apache/htdocs/www/quwei/web/dist"
<Directory "/usr/local/apache/htdocs/www/quwei/web/dist">
Options Indexes FollowSymLinks ExecCGI Includes
AllowOverride All
Order allow,deny
Allow from all
</Directory>
ProxyPass / http://localhost:8080/ ProxyPassReverse / http://localhost:8080/
2.访问即可
-
demo项目代码下载:
https://github.com/fyonecon/myvue
-
后记:
vue的目录设置似乎没有Angular2设置的清晰,因为vue不是使用的ts才流行起来的吧。
对于模块化的单页应用,我自己写了个开源MVVM前端框架view https://blog.csdn.net/weixin_41827162/article/details/86598265,更简单更清晰!
-