23條JavaScript初學者應知的最佳實踐方法

者：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

index.html ：所有vue文件都是單頁面形式(SPA)開發，所有vue組件都是通過index.html進行渲染加載。

main.js：相當于java的入口函數，控制初次啟動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：用來監聽路由的變換，可以用來定義頁面切換時的過渡效果。

App.vue默認為一個根組件。

router/index.js文件

引入組件的代碼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那個頁面了哦。

好了，各位老鐵。相信你一定也學會搭建這個服務器環境了哦。

有問題歡迎留言哦。一起學習。

在線咨詢

上一篇：syntaxhighlighter 代碼超長之后自動
下一篇：探尋數字背后的迷霧：HTML內容提取失敗的深層啟示在

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

23條JavaScript初學者應知的最佳實踐方法

您的項目需求