Vue-使用webpack+vue-cli搭建项目
一、准备
安装NodeJs + 安装Webpack + 配置环境变量
技巧使用:
1. npm 淘宝路径配置:npm config set registry=https://registry.npm.taobao.org
2.查看npm命令列表 => $ npm help
二、搭建项目
1、全局安装vue脚手架工具 vue-cli
npm install vue-cli -g
2、初始化 (项目名小写)
vue init webpack project 或 vue init webpack-simple project # 前者构建的应用丰富于后一个
项目基本信息配置:
Project name (demo-one) # 项目名称
Project description (A Vue.js project) # 项目描述
Author 作者
Vue build (Use arrow keys) # 直接回车 选择runtime+compiler
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 代码检测工具
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 是否需要单元测试工具 暂时不需要 n 否
Setup e2e tests with Nightwatch? (Y/n) # 是否安装端到端测试工具 暂时不需要 n 否
Should we run npm install for you after the project has been created? 在创建完项目之后是否需要自动运行npm install来下载第三方包 我这里选择第一个npm安装
3、安装依赖包 node_modules
npm install
4、运行项目
npm run dev
三、项目说明
1、npm install安装的是什么呢?我们刚刚在 vue init 初始化的时候会生成一个 package.json 文件
npm install 则会安装package.json中写的需要依赖的第三方包,包括dependencies和devDependencies
//如果该安装方式太慢,可以使用cnpm淘宝代理镜像
安装好后就 可以 npm run dev 运行项目了
2、vue-cli初始化文件目录结构详解
!!!为什么把这里的App.vue称为根组件,main.js称为入口文件呢?
在main.js(入口文件)中App.vue(根组件)import进来了,挂载在了index.html(主页面)id为app的div上。也就是说,挂载在index.html(主页面)的组件就是根组件,把根组件挂载在主页面的文件就是入口文件。
3、如何配置 npm run dev 在浏览器后自启动项目
通过修改config中的index.js文件把autoOpenBrowser改为true~下次运行npm run dev或者npm start后即会自动启动页面
四、开发过程中遇到的跨域问题
由于还在script标签开发的方式下,前端文件和后端文件都在同在apache服务器下,直接请求本机同一个端口的文件并不属于跨域。但是在vue-cli方式下,由node.js起的一个临时的服务器占用的是8080端口和后端所方式的文件不处于同一个端口号,这就出现了跨域的问题。
解决方法:修改config index.js中的proxyTable
在main.js(入口文件)中加入一行Vue.prototype.HOST = '/DNA'
以请求的url地址为url: this.HOST+"/insert/get_data"为例子对proxyTable做一个说明
请求的url为/DNA/insert/get_data,由于请求的url中包含了proxyTable中配置了的/DNA,这时候Node.js代理服务器就可以发挥作用了。Node.js会去请求http://localhost/repo/DNA/ins...,把请求得到的接口返回给前端。
为啥是http://localhost/repo/DNA/ins...,下面做一下讲解
路径重写有什么用呢?如果你程序得接口本来就有这个路径地址,你可以不需要重写,如果没有就需要重写,把其重写为空,我这个程序接口其实本来就有/DNA,其实我这里可以不需要重写,然后把target改为'http://localhost/repo'
五、关于打包
vue-cli已经把打包的东西配置好了,只需要通过npm run build 或者 node build/build.js即可对程序进行打包。
为啥输入npm run build可以进行打包呢也是package.json配置好的原因
打包出来的文件结果,默认情况,打包生成的文件会放在vue-demo下的dist文件夹,注意双击html是不能打开这个文件的(双击打开显示的是一片空白),打包出来的文件需要放在服务器上才能跑起来,以前我双击打开看到白白的文件,一直以为是我打包出错了哈哈哈。
至于static文件和index.html存放的路径是可以修改的,可以修改为任意的路径,方便打包后的程序的运行。
修改config文件夹下的index.js文件中build对象的参数即可。
原文作者:风子猪
原文地址:https://segmentfault.com/a/1190000015680030
转载于:https://www.cnblogs.com/yangchin9/p/11004638.html
Vue-使用webpack+vue-cli搭建项目相关推荐
- 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 转载于:https://github.com/Meowv/Blog 首先,默认咱们已经有了.net ...
- 使用vue+webpack从零搭建项目
vue到现在已经成为一个热门的框架,在项目实践当中,如果想要创建一个新项目,通常都会使用vue-cli的脚手架工具,毋容置疑能够方便很多,很多东西也不需要自己亲自去配置.都知道,脚手架其实是vue结合 ...
- WEB前端 vue学习一使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...
- Vue脚手架3.0快速搭建项目
安装前的准备工作 node -v or npm -v //检测node是否安装过 cnpm -v //检测cnpm是否安装 更改国内淘宝镜像,速度更快一写 npm install cnpm -g -- ...
- vue中h5页面的搭建
在工作中可能会遇到h5页面的搭建,本篇文章主要讲解如何从零开始搭建一个vue项目,实现h5页面的适配,浏览器默认样式的清除,路由的配置,项目的打包等,那就让我们开始学习吧. 如果大家只是需要一个完整的 ...
- VUE前段开发-开发环境搭建和开发工具安装
一 VUE介绍 (1)VUE,也就是vue.js,官方的介绍是是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...
- Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目
文章目录 一.安装 Vue CLI 二.构建前端项目 2.1.创建一个基于 webpack 模板的项目 2.2. 安装图解 2.3. 项目结构总览 2.4. 运行项目 2.5. 浏览器验证 项目Git ...
- vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- Mac Webpack Vue项目的搭建
文章目录 前言 一.Node的安装? 二.Webpack的安装 三.Vue 的安装 四.Vue项目的创建 五:运行项目 前言 由于公司需要对接浙政厅的H5应用平台,为了满足平台的发布要求,自己第一次研 ...
最新文章
- 【转】解密“设计模式”
- C/C++左值性精髓(二)哪些表达式是左值,哪些是右值?----右值表达式
- 两步实现 mysql 远程连接
- AngularJS API之isXXX()
- error=Error Domain=NSURLErrorDomain Code=-1003
- 双极结型三极管及放大电路基础
- Python-装饰器进阶
- 【Unity】UGUI无法修改UI元素的Pivot锚点位置
- 调用另一个cpp的变量_编写一个LLVM后端
- Marlin固件学习总结(一)
- 发版名词介绍(alpha,beta,RC,Release)
- 从特斯拉召回事件,窥探OTA汽车进化真面目
- memcpy、memmove、memcmp、memset函数的使用说明和模拟实现
- 推荐|脚本2分钟实现电话短信报警
- CodeSmith Professional v5.1.3.8510 破解(2009.7.1)
- 科技型中小企业认定标准
- Navicat Premium使用手册
- 大一计算机绩点3算什么水平,绩点3.9算什么水平
- 雅虎创始人杨致远简介
- 大学物理复习笔记——静电场
热门文章
- 同事操作两个数据源保持事务一致_「微服务架构」微服务架构中的数据一致性...
- 管理维护MySQL的SQL语句有哪些_MySQL常用管理SQL语句
- catia钣金根据线段折弯_SolidWorks钣金折弯参数设置技巧
- python电子病历数据挖掘_数据挖掘技术在基于XML的电子病历中的应用研究
- 查看linux文件系统结构,如何查看Linux系统架构类型
- LQ训练营(C++)学习笔记_深度优先搜索
- 数据结构-循环单链表之约瑟夫问题
- 第一章:初识lucene
- Opencv3编程入门学习笔记(五)之通道分离(split)与合并(merge)
- 现在是不是很多人都不愿意在银行存钱?