者:web前端开发
转发链接:https://mp.weixin.qq.com/s/VpCiBMZ5fMRNpKAASUpi7w
ue项目启动后调用顺序: index.html → main.js → app.vue → router/index.js → components/组件
一般项目创建好后会有三个文件:index.html、main.js、app.vue
import Vue from 'vue' // 引入vue
import App from './App' // 引入App.vue文件
import router from './router' // 引入一段路由配置
Vue.use(C) // 全局方法定义为C
el:'#app'这个和index.html中的app组件挂钩。官网解释为:
模板将会替换挂载的元素。
watch:用来监听路由的变换,可以用来定义页面切换时的过渡效果。
引入组件的代码routes定义时,path为你以后页面间路由跳转的路径。name为import进来的名字,component也为这个名字。
其他文件:
-build
-build.js 生产环境构建脚本
-utils.js 构建相关工具方法
-webpack.base.conf.js webpack基础配置
-webpack.dev.conf.js webpack开发环境配置
-webpack.prod.conf.js 生产环境配置
-confg 项目配置
–dev.env.js 开发环境变量
–index.js 项目配置文件
–prod.env.js 生产环境变量
–test.env.js 测试环境变量
-package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
-src 源码目录
–main.js 入口js文件
–app.vue 根组件
–components 公共组件目录
–title.vue
拓展阅读
《Vue进阶(二):Vue项目文件结构介绍》
提:
安装配置有node环境
一、初始化node项目
在项目的工作目录,执行命令
npm init
初始化参数设置,可以根据情况设置,或者直接全部默认也行:
初始化项目
二、安装express模块
Express是目前最流行的基于Node.js的Web开发框架,可以快速地搭建一个完整功能的网站。
直接通过命令行安装
npm i express --save
G:\app-server>npm i -g express --save
+ express@4.17.1
added 2 packages from 2 contributors and updated 24 packages in 23.892s
三、编写app.js
新建一个app.js文件
var express=require('express');
var app=express();
app.use(express.static(__dirname + '/public'));
app.listen(8080, ()=> {
console.log(`App listening at port 8080`)
})
在express添加中间件,设置静态资源路径为public,所有的HTML、CSS、JS等文件都放在public下即可。默认访问public下面的index.html
新建index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web测试平台</title>
</head>
<body>
<h1>Web测试平台</h1>
</body>
</html>
四、启动服务
node app.js
即可运行
G:\app-server>node app.js
App listening at port 8080
访问ip:8080
就可以访问到index.html那个页面了哦。
好了,各位老铁。相信你一定也学会搭建这个服务器环境了哦。
有问题欢迎留言哦。一起学习。
*请认真填写需求信息,我们会在24小时内与您取得联系。