者:web前端開發(fā)
轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/VpCiBMZ5fMRNpKAASUpi7w
ue項(xiàng)目啟動(dòng)后調(diào)用順序: index.html → main.js → app.vue → router/index.js → components/組件
一般項(xiàng)目創(chuàng)建好后會(huì)有三個(gè)文件: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'這個(gè)和index.html中的app組件掛鉤。官網(wǎng)解釋為:
模板將會(huì)替換掛載的元素。
watch:用來監(jiān)聽路由的變換,可以用來定義頁面切換時(shí)的過渡效果。
引入組件的代碼routes定義時(shí),path為你以后頁面間路由跳轉(zhuǎn)的路徑。name為import進(jìn)來的名字,component也為這個(gè)名字。
其他文件:
-build
-build.js 生產(chǎn)環(huán)境構(gòu)建腳本
-utils.js 構(gòu)建相關(guān)工具方法
-webpack.base.conf.js webpack基礎(chǔ)配置
-webpack.dev.conf.js webpack開發(fā)環(huán)境配置
-webpack.prod.conf.js 生產(chǎn)環(huán)境配置
-confg 項(xiàng)目配置
–dev.env.js 開發(fā)環(huán)境變量
–index.js 項(xiàng)目配置文件
–prod.env.js 生產(chǎn)環(huán)境變量
–test.env.js 測試環(huán)境變量
-package.json npm包配置文件,里面定義了項(xiàng)目的npm腳本,依賴包等信息
-src 源碼目錄
–main.js 入口js文件
–app.vue 根組件
–components 公共組件目錄
–title.vue
拓展閱讀
《Vue進(jìn)階(二):Vue項(xiàng)目文件結(jié)構(gòu)介紹》
提:
安裝配置有node環(huán)境
一、初始化node項(xiàng)目
在項(xiàng)目的工作目錄,執(zhí)行命令
npm init
初始化參數(shù)設(shè)置,可以根據(jù)情況設(shè)置,或者直接全部默認(rèn)也行:
初始化項(xiàng)目
二、安裝express模塊
Express是目前最流行的基于Node.js的Web開發(fā)框架,可以快速地搭建一個(gè)完整功能的網(wǎng)站。
直接通過命令行安裝
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
新建一個(gè)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添加中間件,設(shè)置靜態(tài)資源路徑為public,所有的HTML、CSS、JS等文件都放在public下即可。默認(rèn)訪問public下面的index.html
新建index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web測試平臺(tái)</title>
</head>
<body>
<h1>Web測試平臺(tái)</h1>
</body>
</html>
四、啟動(dòng)服務(wù)
node app.js
即可運(yùn)行
G:\app-server>node app.js
App listening at port 8080
訪問ip:8080
就可以訪問到index.html那個(gè)頁面了哦。
好了,各位老鐵。相信你一定也學(xué)會(huì)搭建這個(gè)服務(wù)器環(huán)境了哦。
有問題歡迎留言哦。一起學(xué)習(xí)。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。