利用VUE-CLI脚手架搭建VUE项目
前言
具体内容
提示信息
|
说明
|
Project name
|
项目名称;默认是创建时输入的项目名称;当然还可以直接修改,回车即可
|
Project description
|
项目描述;同样可以输入项目描述内容
|
Author
|
项目创建者 |
Install vue-router?(Y/N)
|
是否需要vue-router,默认选择使用,因为这样生成好的项目就会有相关的路由配置文件
|
Use ESLint to lint your code?(Y/N)
|
是否使用ESLint,默认使用,这样生成的项目会生成相关的ESLint配置
|
......
|
......
|
项目文件、文件夹说明 | 说明 | 备注 |
build文件夹 | 此文件夹主要是对webpack的配置 |
webpack.base.config.js 基本webpack配置
webpack.dev.config.js 开发环境配置
webpack.prod.config.js 生产环境配置
......
这些文件里已经完成一些简单配置,包括入口文件、插件、loader、热更新等;我们可以根据实际项目需求来进行相应的配置。
|
config文件夹 |
这个文件夹下包括3个文件,最主要的是index.js这个文件,它是进行配置代理服务器的文件
|
dev.env.js 开发环境
prod.env.js 生产环境
index.js
在index.js中配置代理服务器,这个和我们前端项目开发息息相关,和后端联调就需要在该文件夹中设置一个地址,这个地址是对应后端的地址;在“proxyTable”下的“target”属性里设置代理地址。此外,在使用webpack做构建工具的项目中使用proxyable代理解决跨域是一种比较方便的选择。
实现机制:
本地服务器->代理->目标服务器->获取到数据后通过代理伪装成本地服务器请求的返回值->浏览器获取到数据并进行渲染展示
|
src文件夹 | 此文件夹包含所有主要程序文件和文件夹,也是使用频率最高的一个文件夹 |
assets 此文件夹存放公用的样式、图片等
components 此文件夹存放所有的vue组件
router 此文件夹下的index.js是一个路由设置文件
App.vue 此文件是vue项目入口文件
main.js 此文件也是入口文件,对应webpack.base.config.js文件里的entry
|
static文件夹 | 此文件夹一般存放一些静态资源 | 该文件夹内存放的资源可以直接引入到项目中使用 |
package.json | 此文件内保存着项目中所有依赖包及其包版本号信息;主要包括2部分内容 |
第一部分是scripts,可以在scripts里设置命令;例如设置了server用于调试,则我们启项目时输入的是npm run server;例如设置了build,则是输入
npm run build用于打包;
第二部分是dependencies和devDependencies,这里是项目中需要的依赖包,分别对应全局下载的依赖包和局部下载的依赖包
|
...... | ...... | ...... |
结束语
利用VUE-CLI脚手架搭建VUE项目的更多相关文章
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- 手动搭建Vue之前奏:搭建webpack项目
手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...
- Vue Cli 3:vue.config.js配置文件
Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...
随机推荐
- 将rdlc报表作为资源嵌套使用
原文:将rdlc报表作为资源嵌套使用 如果我们准备在Windows Forms里面使用rdlc报表,那么会遇到一个问题:rdlc报表到底要不要作为附属文件的方式随程序发布? 这样做的优点是:报表可以后 ...
- JSP版本的数据库操作
代码时间:2015-6-16 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- 每天一个Linux常用命令 ls命令
ls:列出目录中的内容 -l 显示详细信息 -a 显示所有文件,包括隐藏文件 -i 显示inode -t :依时间排序,而不是用档名. -r :将排序结果反向输出,例如:原本档名由小到大,反向则为 ...
- 【扯淡篇】SDOI2018丶一轮游丶记
--某不知名蒟蒻的SDOI2018 R1退役场游记&&OI生涯总结 真的是混不下去了. 进队是不可能的, 进队是不可能进队的. 这辈子不可能进队的. 刷题又不会刷 就是靠打表找规律这种 ...
- 【Luogu】【关卡2-3】排序(2017年10月) 【AK】
任务说明:将杂乱无章的数据变得有规律.有各种各样的排序算法,看情况使用. 这里有空还是把各种排序算法总结下吧.qsort需要会写.. P1177 [模板]快速排序 这个题目懒得写了,直接sort了.. ...
- (PASS)break 和 continue 的区别
1 break; while循环中,break是用于永久终止循环.即不执行本次循环中break后面的语句,直接跳出循环. 终止,跳出,结束循环(可以作用在任何地方).也常与switch分支结构合用 ...
- bcpow — 任意精度数字的乘方
bcpow — 任意精度数字的乘方 说明 string bcpow ( string $left_operand , string $right_operand [, int $scale ] ) 左 ...
- oscache缓存
oscache 使用总结 Posted on 2009-05-22 22:45 青果 阅读(1270) 评论(2) 编辑 收藏 所属分类: 技术点滴 前阵子对公司网站进行了性能优化,其中,有一项 ...
- IDEA工具,配置相关笔记
1.修改背景颜色(黑/白)File -> settings -> Editor -> Color Scheme -> General -> (Scheme选择Defaul ...
- 【在线工具】java开发常用在线工具
转自:常用工具页面 Java源代码搜索 Grepcode是一个面向于Java开发人员的网站,在这里你可以通过Java的projects.classes等各种关键字在线查看它对应的源码,知道对应的pro ...