整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

23条JavaScript初学者应知的最佳实践方法

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为你以后页面间路由跳转的路径。nameimport进来的名字,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那个页面了哦。


好了,各位老铁。相信你一定也学会搭建这个服务器环境了哦。

有问题欢迎留言哦。一起学习。