从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
1.vue-cli搭建一个可靠成熟的项目
1.介绍
vue-cli
我是去年六月份接触的vue1.0,当时还是个菜逼,当然现在也是,写了一年,抄代码的时候一直是copycopy,在别人的框架基础上开发,然后渐渐发现很多vue-start的模板都各有优点,所以慢慢的开始集合到了一起。
使用vue-cli从零开始搭建的话,一些webpack配置也可以让自己明白webpack其实可以做更多的事情。
在使用vue的过程中,转行做了ng4半年左右,对vue也有了更深的理解。
还有一个cooking-cli,配置更简单,假如不想看webpack的复杂配置,可以直接跳到第二篇文章。
2.配置node、webpack
node + webapack
webapck需要node提供服务,并且需要npm安装,所以先下载一个node
安装node
node下载
mac推荐下载最新稳定版,windows下载最新版本
下载完成后,打开命令行,输入npm -v 确认安装完成(安利一个命令行工具,同时具备git bash -- ConEmu)
命令行全局安装webpack + vue-cli
npm太慢的话,可以使用cnpm或者yarn(这步可以略过,下面是cnpm的安装,此后npm命令变成cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack + vue-cli
npm install -g webpack vue-cli
3.开始构建项目
vue-cli搭建项目
讲解部分webpack配置文件
讲解项目目录
配置路由以及路由文件
构建完成
初始化项目
打开cmd工具 cd /你的项目目录 例:cd f:/plugins
vue init webpack vue-start
这里其实可以一路回车,然后项目就构建好了,稍微讲解一下这些配置吧
? Project name vue-start //你的项目名称
? Project description A Vue.js project // 你的项目描述
? Author 小帅 // 作者的名称
? Vue build standalone // 这个直接选前者,毕竟是推荐
? Install vue-router? Yes // 是否安装vue-router 选是
? Use ESLint to lint your code? No // 是否使用eslint管理代码,个人项目不推荐,不然你还会想办法关掉它
? Setup unit tests with Karma + Mocha? No // 是否使用karma + mocha 否 因人而异吧,我基本不写测试代码
? Setup e2e tests with Nightwatch? No // 是否安装e2e测试 否
然后
cd vue-start // 进入项目目录
npm i //安装项目依赖
npm run dev // 开始!
我们直接来看看项目目录,分析一下,推荐编辑器vscode,这里有一大波vscode的插件!
目录解析
build -- 这个文件夹大部分是webpack的配置文件
config -- 一些配置文件,比如配置监听端口
node_modules -- 你的依赖包都在这里
src -- 主工程文件夹,基本上所有的开发都在这个文件夹进行
static -- 静态文件目录
package.json -- 这个文件是项目的一些配置信息
这篇文章就不做更多的剖析了,直接进入实战吧
npm run dev之后 会自动打开一个浏览器,但是我觉得这个设定我不喜欢,先把这个功能给禁了吧
build/dev-server.js 73行开始
devMiddleware.waitUntilValid(() => {console.log('> Listening at ' + uri + '\n')// when env is testing, don't need open itif (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {opn(uri)}_resolve()
})把这行代码直接注释掉// if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {// opn(uri)// }
现在打开浏览器 localhost:8080 项目已经可以运行了
命令行ctrl + c退出进程 现在来试试打包
先安装一个插件anywhere 这个是提供http服务的 直接npm i -g anywhere
安装完成后直接来测试生产环境,先把生产环境配置好,以后省功夫
cmd输入 npm run build && anywhere
然后浏览器输入 http://localhost:8000/dist/ 然后发现页面并没有预期的效果,审查元素可以看出js的路径都错了,这个时候需要修改一个配置文件
config/index.js
module.exports = {build: {env: require('./prod.env'),index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',productionSourceMap: true,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report},dev: {env: require('./dev.env'),port: 8080,autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap: false}
}把build(生产环境)的assetsPublicPath修改为相对路径 也就是修改为
assetsPublicPath: './'然后重新运行一次 npm run build && anywhere这个时候就可以看到和开发环境一样的效果了,这就是线上的环境
本篇文章就介绍到这里 下一篇文章将会介绍如何配置图片的路径,以及路由配置。
一个团结互助的讨论组,专注前端三十年!
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)相关推荐
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 从零开始搭建一个springCloud项目
前言:springCloud,相信大家已经听过很多次了,现在各种大大小小的公司都在使用的微服务框架,包括我正在上班公司的项目里面使用到的就是springCloud,此文仅对于刚入行不久的小白,大佬们可 ...
- 从零开始搭建一个管理系统-vue3.0项目创建-----1
从零开始搭建一个管理系统-vue3.0项目创建-----1 讲在前面 webpack构建项目 代码编辑器 依赖修改 码云代码地址 讲在前面 假设你已了解关于 HTML.CSS. JavaScript ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器
spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器 一.Mybatis plus代码自动生成器 1.引入配置 2.创建Controller 3.执行m ...
- spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2
spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2 一.logback.xml配置日志美化 二.集成swagger2 1.引入依赖 2.编写配置文件 ...
- spring boot:从零开始搭建一个项目 - day8 实现jwtToken验证
锻炼不就是为了吃更多好吃的吗 --刚去完健身房然后开了包薯片=-= spring boot:从零开始搭建一个项目 - day8 实现jwtToken验证 一.生成token 二.重写拦截器 咳,书接上 ...
- spring boot:从零开始搭建一个项目 - day 7 springboot devtools热加载+MybatisPlus配置+kisso从入门到放弃
spring boot:从零开始搭建一个项目 - day 7 springboot devtools热加载+MybatisPlus配置+kisso从入门到放弃 一.springboot devtool ...
- 从零开始创建一个uni-app项目
从零开始创建一个uni-app项目 新建项目 目录说明 文件结构 安装uview 安装ucharts 新建项目 创建uni-app项目首先要下载HBuilder X,HBuilderX下载地址: 下载 ...
最新文章
- 让图片动起来,特朗普和蒙娜丽莎深情合唱《Unravel》
- 【Mysql 学习路线图】
- 安装orb_slam 的坑解决方法
- 英文论文中i.e.,e.g.,etc.的正确用法
- 使用Java程序输出1~100之间 7的倍数的个数及总和,并打印输出
- Jmeter插件-dubbo
- 质量超高的UI素材站!推荐UI\UX设计师
- python吃显卡还是内存条_用游戏本打游戏是显卡重要还是内存重要?
- 西安交通大学网络教育计算机考试题,西安交通大学《大学计算机基础》理论考试试题.doc...
- BAT批处理文件 一键开启卓越性能电源计划方案
- java 图层,图层Layers的介绍
- 深入浅出计算机组成原理26-Superscalar和VLIW:如何让CPU的吞吐率超过1?
- C语言初学者如何制作一个完整的C语言程序——歌曲排行榜
- 【实用工具】treer生成项目的目录结构,帮助大家书写好的项目readme
- 【Algorithm】一般约束优化问题——PHR算法及其Matlab实现
- css 网站大背景(按比例缩放背景图片)
- 童鞋想盗取我十几个G的“种子”,看我是用python来层层加锁!!!
- 夜深人静写算法(十五)- 完全背包
- 未来时代量计算机科幻游戏,“八本科幻未来时代小说”到那个我们可以想象的极限,享受科幻美...
- 家庭亲情网,要取消几个号码怎么取消
热门文章
- 太牛逼了!项目中用了Disruptor之后,性能提升了2.5倍
- HttpClient连接池设置引发的一次雪崩
- 机器学习必读TOP 100论文清单:高引用、分类全、覆盖面广丨GitHub 21.4k星
- 哪些“双一流”更得华为偏爱?这所高校人数远超清北华五
- 【CVPR 2020】弱监督怎样做图像分类?上交大提出自组织记忆网络
- 清晰易懂的Numpy入门教程
- Linux内核网络栈1.2.13-tcp.c概述
- 使用pytorch构建图片分类器
- fastText的原理剖析
- MySQL数据库分组和聚合函数组合使用