WEB前端 vue学习一使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli
一、 安装 node.js
首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。
只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399
安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。
二、安装 vue-cli
安装好了 node,我们可以直接全局安装 vue-cli:
npm install -g vue-cli
但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本
三、生成项目
首先需要在命令行中进入到项目目录,然后输入:
vue init webpack Vue-Project
其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖
cnpm install
然后启动项目
npm run dev
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js
建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
四、打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后,可以输入 npm run build 来进行打包工作
npm run build
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
项目上线时,只需要将 dist 文件夹放到服务器就行了。
WEB前端 vue学习一使用 vue-cli 搭建项目相关推荐
- Vue学习笔记:使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目 一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
- web 前端必备学习指南-精华
工具 box-shadow generator 生成 box-shadow 的工具. gradient-generator 渐变生成器. Ultimate CSS Gradient Generator ...
- web前端需要学习什么?需要掌握什么技术
1.Web前端是什么意思 Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页. 用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制 ...
- Web前端的学习路线是什么?本文给你答案
前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师.因此,越来越多的人想要学习Web前端.那么呢?Web前端的学习路线是什么?下面就和我一起来看 ...
- Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础 一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
- 小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
- Web前端入门学习(5)——浮动原理及清除浮动
浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
- Web前端开发学习误区,你掉进去了没?
从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- html5移动web开发黑马掌上商城_月入35k大佬总结:web前端必须学习的内容(附全套前端教程)...
为了让学习变得轻松,高效!今天给大家分享一套教学资源,帮助大家在学习Web前端的道路上披荆斩棘,这套资源的领取方式请看文末 优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面.交互代码的能力. ...
最新文章
- Tensorflow:如何保存/恢复模型?
- Jq学习笔记(7)JQ动画
- 如何生成动态库 .dll 的符号 .lib 文件?
- 使用ASP生成HTML文件
- 【转】android学习日记01--综述
- 什么是 SAP Commerce Cloud 的 catalog
- 在 .NET Core 应用中使用 NHibernate
- Gartner: 2017年11大信息安全技术(解读版)
- 解决vue+axios post参数后端无法接收的问题
- linux中的住设备号和次设备号
- Python入门--模块,from,import,自定义模块
- 【语音处理】基于matlab低通滤波器语音信号加噪与去噪【含Matlab源码 1709期】
- 【基于pyAudioKits的Python音频信号处理项目(一)】实现音频频谱分析仪并进行交互式滤波器设计
- rust react tauri app 现有前端项目打包(windows)
- 信息增益,信息增益率,Gini
- centos7下安装网易云音乐教程及相关依赖关系解决
- 最佳实践 | 助您提升应用的无障碍功能
- 跨链桥之ZetaChain跨链测试网交互
- 浩方、vs 等对战平台的危险
- thymeleaf页面中使用th:onclick标签的使用方式一