Vue 项目结构
时间:2021-08-28
本文章向大家介绍Vue 项目结构,主要包括Vue 项目结构使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、启动命令
npm run serve
二、打包命令
npm run build
三、程序入口
main.js
main.js
import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
App.vue
<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>
index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
index.js
import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
原文地址:https://www.cnblogs.com/mingforyou/p/15196491.html
- A Gentle Introduction to Applied Machine Learning as a Search Problem (译文)
- 技术创新,基于 React Native 的开源项目 | 码云周刊第 17 期
- How to Use the TimeDistributed Layer for Long Short-Term Memory Networks in Python 译文
- ssctf2017_WriteUp
- CENTOS7.2安装CDH5.10和Kudu1.2(一)
- Docker镜像管理
- 360春秋杯3道web题的简单分析
- Vue 2.0 学习总结,精华全在这里了
- 25.2 安装Docker
- 使用JDBC向Kudu表插入中文字符-cast的秘密
- 使用JDBC向Kudu表插入中文字符-双引号的秘密
- Yarn的JobHistory目录权限问题导致MapReduce作业异常
- 输入一个数字,然后计算出从1到输入数字的和,要求,如果输入的数字小于1,则重新输入,直到输入正确的数字为止
- Linux基础(day76)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 冒泡法排序
- Attribute Routing With ASP.net MVC 5
- 使用ABAP代码生成二维码(QR Code)
- 动态加载 ExtJS 类库
- Visual Studio 2013 下 NuGet 无法识别自定义包路径的解决方法
- Xcode 5 中 xib 文件格式的调整
- 调用新浪微博显示用户信息
- 如何用代码动态生成ABAP类型
- 使用自签名证书内部分发 iOS7 应用
- 在 MvvmCross 下使用 iOS Storyboard
- 动态隐藏某些特殊类型的SAP CRM附件
- 设计模式之生成器模式
- Git 客户端保存用户名和密码
- SAP WebClient UI component模型元数据解析工具
- 设计模式之抽象工厂模式