vue零基础学习--搭建项目
一、script引入(练习使用,小型项目)
直接下载并用 <script>
标签引入,Vue
会被注册为一个全局变量。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
二、Vue 提供一个官方命令行工具
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
1.cli是建立在node的环境下,首先检查是否安装node,可以直接到中文官网http://nodejs.cn/下载安装包。安装完之后检查安装的是否成功,输入命令行检查、
显示了安装版本号,则表示安装成功,注意版本号不要过低。
2.直接全局安装 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 来更新版本
3.搭建我们自己的项目
首先到我们需要建项目的文件夹 ,摁住shift键点击鼠标右键,选择在此处打开命令窗口,创建一个基于 webpack 模板的新项目
vue init webpack test-Project
安装结束后,根据提示启动项目,以前安装完后会在安装依赖,现在是在安装的时候就将依赖下载了,不需要单独安装。
成功后的文件结构为:
.
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.
config里面有很多配置文件,我们可以根据项目改动,如更改访问端口号config>index.js
自己项目代码放在src里面里面。
4.上面是最基本的项目,但是我们实际操作中会使用很多有助于我们项目开发的,比如需要引入jQuery、less等让我们快速编码
引入路由 npm install vue-router
引入vuex npm install vuex --save
引入axios npm install axios --save
引入jQuery npm install jquery --save
引入less npm install less less-loader --save
5.项目完成之后,打包上线
npm run build
打包完成后,会生成 dist 文件夹
项目上线时,只需要将 dist 文件夹放到服务器就行了。
vue零基础学习--搭建项目的更多相关文章
- es6零基础学习之项目目录创建(一)
和大家分享一下在学习es6的过程中所积累的东西,也希望更多的朋友能够互相学习 首先创建项目目录 打开你的命令行,什么文件下都可以,大家请随意,我自己用的git,输入 mkdir es6 创建一个完整的 ...
- 【零基础学习FreeRTOS嵌入式系统】之一:FreeRTOS环境搭建
[零基础学习FreeRTOS嵌入式系统]之一:FreeRTOS环境搭建 一:FreeRTOS系统下载 在官网上https://www.freertos.org/,找到下载入口. 或直接进入下载地址ht ...
- 零基础学习Hadoop
零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...
- salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件
在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...
- 零基础学习hadoop到上手工作线路指导(编程篇)
问题导读: 1.hadoop编程需要哪些基础? 2.hadoop编程需要注意哪些问题? 3.如何创建mapreduce程序及其包含几部分? 4.如何远程连接eclipse,可能会遇到什么问题? 5.如 ...
- 零基础学习hadoop到上手工作线路指导(初级篇)
零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...
- [学习线路] 零基础学习hadoop到上手工作线路指导(初级篇)
about云课程最新课程Cloudera课程 零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了. ...
- 零基础学习openstack【完整中级篇】及openstack资源汇总
1.你是如何学习openstack的?2.你对openstack的组件了解多少?3.你认为openstack该如何学习? 一直想写关于openstack的方面的内容,今天终于整理完成.算是完成一桩心事 ...
- 如何从零基础学习VR
转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...
随机推荐
- Yii2整合AdminLTE后台主题
首先你要确保你已经安装好了Yii2 advanced高级模板,并且跑的通. 安装AdminLTE其实没有网上说的那么简单,网上千篇一律的推荐Composer安装,虽然Composer很方便,但是在中国 ...
- Apache服务器安装-apache已经卸载,如何删除注册在系统的服务
cmd进入windows的命令行客户端,执行:sc delete apache 注意:以管理员的身份删除,同理,此方法也可以删除其他类似的服务.例如sc delete MongoDB.
- UVA-10954 贪心+优先队列
贪心策略:每次选取最小的两个数相加,将和作为新的数加入序列,再从里面取两个最小的数...直到只剩下一个数.优先队列正好对付这题. PS :以前在学校OJ做过几乎一毛一样的这题 AC代码: #inclu ...
- 文本处理三剑客之grep&正则表达式
grep是一个文本过滤工具,它支持正则表达式,能把搜索匹配到的行打印出来.grep的全称是Global Regular Expression Print(全局正则表达式)使用权限是所有用户. 一.gr ...
- (转载)windows下mysql忘记密码
Mysql版本:5.1 1. 首先检查mysql服务是否启动,若已启动则先将其停止服务,可在开始菜单的运行,使用命令: net stop mysql 打开第一个cmd窗口,切换到mysql的bin目录 ...
- ssh (Spring , Struts2 , Hibernate)框架的配置使用
思维导图(基本配置) 1. 需要引入的包 2 .spring-config.xml 的配置 <!-- 链接数据库 外部配置文件扫入 --> <context:property-ove ...
- Google最新的图片格式WEBP全面解析
前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
- EDKII Build Process:EDKII项目源码的配置、编译流程[三]
<EDKII Build Process:EDKII项目源码的配置.编译流程[3]>博文目录: 3. EDKII Build Process(EDKII项目源码的配置.编译流程) -> ...
- 错误代码: 1248 Every derived table must have its own alias
1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:SELECT stu_id, (SELECT stu_name FROM t ...
- Java导出防止小数显示不全工具类
1.说明 在做项目的过程中,发现导出功能中的数据显示不全,如"0.4",会显示成".4":"-0.8"会显示成"-.8" ...