Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构、项目基本配置、Webpack 配置等等。通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注在写应用上,而不必将大量时间花费在配置上。但是官方的 vue create 命令只能快速地建立一个单页应用的原型,想要开发多页应用还需要再配置一些东西。可同时支持less,sass。
说明
Vue CLI 3 多页应用项目**Git地址: https://github.com/zydemail/v...。
初始化
git clone https://github.com/zydemail/vue-mpa.git
cd vue-mpa
npm install
使用
- 开发:
本地运行:npm run serve:dev 注:本地开发调试服务器接口需开启浏览器跨域,可在 Chrome 应用商店安装 Allow CORS: Access-Control-Allow-Origin 插件即可解决
修复代码格式错误:npm run lintfix
- 打包:
开发环境: npm run dev
测试环境: npm run build:tests
生产环境: npm run build:prod
目录结构说明
│ .browserslistrc // 配置目标浏览器
│ .env.development // 开发环境配置,可在此配置全局变量,使用 process.env 读取,打包工具会根据不同环境自动读取变量
│ .env.localdev // 本地开发环境配置,可在此配置全局变量,使用 process.env 读取,打包工具会根据不同环境自动读取变量
│ .env.production // 生产环境配置,可在此配置全局变量,使用 process.env 读取,打包工具会根据不同环境自动读取变量
│ .env.tests // 测试环境配置,可在此配置全局变量,使用 process.env 读取,打包工具会根据不同环境自动读取变量
│ .eslintrc.js // eslint 配置
│ .gitignore
│ .postcssrc.js // postcss配置,一般不会用到,使用默认值
│ babel.config.js // babel配置,一般不会用到,使用默认值
│ package-lock.json
│ package.json
│ README.md
│ title.js // 统一配置生成页面的 title
│ vue.config.js // vue 配置,可配置 webpack 等,可参照 https://cli.vuejs.org/zh/config/
│
├─public // 此文件夹下可以放置一些静态资源,除了index.html会经过处理外,其他文件都会原封不动的自动复制到 htdocs 根目录下,不会经过 webpack 的处理。
│ favicon.ico
│ index.html // 所有的打包页面都会经过这个文件,本模板对多页的配置采用了统一处理,当然也可以在 vue.config.js 单独配置每个页面,可参照 https://cli.vuejs.org/zh/config/#pages
│
├─src // 源代码文件夹
│ ├─assets // 资源文件夹,可放置 css、images等
│ │ logo.png
│ │
│ ├─components // 组件文件夹,可定义一些公共组件
│ │ Header.vue
│ │
│ ├─pages // 页面文件夹,每个页面都是一个文件夹
│ │ ├─about // about 页面
│ │ │ app.js // 一般不做更改
│ │ │ app.vue // 页面的 html、css、js 都写在这个文件里
│ │ │
│ │ ├─index
│ │ │ app.js
│ │ │ app.vue
│ │ │
│ │ └─user
│ │ └─index
│ │ app.js
│ │ app.vue
│ │
│ ├─style // 公共样式文件夹,可以定义一些公共样式,如浏览器重置样式 reset.less,此文件夹可按需求随意更改
│ │ │ index.less
│ │ │
│ │ └─core
│ │ index.less
│ │ reset.less
│ │
│ └─utils // 常用 js 工具类
│ └─core
│ http.js // http 请求库,封装 axios,可直接调用
│
└─tests // 单元测试,可忽略└─unit.eslintrc.js
Vue CLI 3 多页应用项目的搭建相关推荐
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- 七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用(安装,拉取2.x模板,初始化项目),Vue cli2详解,Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
- 使用Vue CLI 3提升您的Vue.js工作流程
没有命令行界面(CLI)工具的帮助,我们几乎无法想象现代Web开发. 通过减少重复繁琐的任务,它们极大地促进并加快了开发流程. 手动设置项目,具有所有的上线,构建,测试,预处理,优化和依赖项跟踪功能, ...
- springboot+mybatis+vue WEB项目简易搭建文档
图书管理系统架构文档 摘要 图书管理系统,拟用MySql作数据库,使用SpringBoot作为后端架构,并使用Maven作为后端项目管理组件,Java语言,数据库与后端稳定连接架构MyBatis,Vu ...
- Vue CLI 初始化脚手架详解
1.说明 1.Vue 脚手架 是Vue 官方的标准化开发工具 (开发平台) 2.最新的版本是 4.X 3.文档 Vue CLI 2.具体步骤 1.如果下载缓慢请配置 npm 淘宝镜像 npm conf ...
- Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- VUE学习-脚手架vue cli(六)
一.脚手架vue cli 官网文档:https://cli.vuejs.org/zh/guide/ A)安装vue/cli 1.使用以下命令安装: npm install -g @vue/cli # ...
- Vue CLI 插件 Plugins
插件Plugins VUE CLI 是使用是基于插件的体系结构的. 如果检查新创建的项目的 package.json ,我们将发现以 @vue/cli-plugin- 开头的依赖项.插件可以修改内部w ...
最新文章
- 选点(dfs序+LIS)
- OSError: [WinError 126] 找不到指定的模块/Could not find 'cudart64_90.dll'.
- 由于存储区是只读的,存储区已满,或者存储区没有正确打开,所以导致失败
- java 字符转化字符串_【转载】java字符串的各种编码转换
- 对象后加一个值 php_PHP 对象使用
- php全词查询,php 关键词查询的实现方法
- Java 高级数据结构 —— Properties
- 仿生软体机器人就业咋样_SRT近亿元B轮融资,中国软体机器人技术从空白到全球领先...
- jquery中的ajax写法
- YOLACT论文阅读及解析
- 计算机软件著作权的软件全称,软件著作权名称要求是什么
- 计算机网速单位是什么,文件大小和网速的单位
- python输入某年某月某日歌词_python求输入某年某月某日,判断这一天是这一年的第几天...
- 请为自己计算机进行磁盘优化,如何对Win10系统的磁盘进行清理并优化
- 日记app怎么上传录制的视频
- snap telemetry-Intel 网络遥测框架简介
- 机器学习之回归与分类
- [译]尤雨溪: Ref语法糖提案
- 在线教育app 一对一辅导 内容付费 直播 网校app EduJoin
- 古代一两银子值多少人民币?
热门文章
- 072_Math对象
- linux查看oracle的sga设置,Oracle基础教程之设置系统全局区SGA命令
- Android Studio:创建类时,添加作者名和日期
- mysql 多个游标_mysql 存储过程中使用多游标
- 自定义request_Spring Security 自定义登录认证(二)
- 考博024001计算机科学与技术综合知识,2005-2006年同等学力人员申请硕士学位学科综合水平全国统一考试计算机科学与技术试卷.pdf...
- java 队列和rabbitmq_java – 如何在不使消息出列的情况下浏览rabbitmq中的队列
- golang goroutine实现_golang技术随笔(二)理解goroutine
- 计算机系统存数及取数方式,计算机系统结构总结2
- php删除禁用函数,百度云平台封禁的PHP函数列表 PHP禁用函数列表(转)