vue学习过程的个人笔记
2018-04-03 15:36
393 查看
我学习和使用angular也有两年了。期间也接触过react,vue,简单地学习过。现在也想好好学一下vue,于是我在这里记录一下学习的大概过程。
命令中的webpack是指生成一个基于webpack的项目。
vue-cli生成项目过程的最后一个会提示你选择是否自动执行npm install,我选择了yes,或者cd到项目目录下运行npm install安装依赖也可以。安装依赖的时间有点长,请耐心等待!
该命令会执行npm run dev,默认端口是8080,我个人喜欢改端口,在dev脚本后加上–port=3200即可。
运行该命令后,会执行build.js。webpack的配置文件主要涉及build和config两个目录,后面修改这两个目录中的文件应该可以进行定制。
我们build项目之后,直接把index.html拖到浏览器中是不可以访问的。要么放在服务器上进行访问,要么就是使用http-server进行测试。
安装http-server后,我们cd到dist目录下,启动http-sever
然后我们就可以通过http://127.0.0.1:8080/index.html访问打包后的项目了。
安装vue-cli
之前用嵌入script标签的方式撸过一遍vue的一些特性,包括vue-router。这里我使用vue-cli的方式来安装一下。npm install --global vue-cli
生成vue项目
vue init webpack vuecms
命令中的webpack是指生成一个基于webpack的项目。
vue-cli生成项目过程的最后一个会提示你选择是否自动执行npm install,我选择了yes,或者cd到项目目录下运行npm install安装依赖也可以。安装依赖的时间有点长,请耐心等待!
启动vue项目
npm start
该命令会执行npm run dev,默认端口是8080,我个人喜欢改端口,在dev脚本后加上–port=3200即可。
打包vue项目
npm run build
运行该命令后,会执行build.js。webpack的配置文件主要涉及build和config两个目录,后面修改这两个目录中的文件应该可以进行定制。
我们build项目之后,直接把index.html拖到浏览器中是不可以访问的。要么放在服务器上进行访问,要么就是使用http-server进行测试。
npm install -g http-server
安装http-server后,我们cd到dist目录下,启动http-sever
// 键入这个命令即可启动http-server服务 http-server
然后我们就可以通过http://127.0.0.1:8080/index.html访问打包后的项目了。
相关文章推荐
- 【个人学习笔记17之--存储过程浅谈】
- Sql Server存储过程个人学习小笔记
- 个人学习过程中遇到的疑难杂症(笔记,持续更新中……)
- 个人Vue-1.0学习笔记
- 个人学习笔记---inode节点详解
- AutoMake 学习笔记---使用过程
- [软件调试学习笔记]WinDbg演示IA-32 CPU下的Windows 分页机制下的地址转换过程
- ExtJS学习过程中遇到的问题笔记
- java基础(个人学习笔记)B
- 2.20存储过程学习笔记
- Vue学习笔记进阶篇之过渡状态详解
- Java学习笔记之数据库(触发器、事物、索引、投影和除、视图、存储过程和函数 )含各种链)___ 一直补充
- 自己用的C#基础学习笔记(一)——C#面向过过程
- Vue.js学习笔记(三)
- VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
- 揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页
- SQL Server 2005存储过程学习笔记——创建、修改存储过程
- 数据库与JDBC(个人学习笔记,不断更新修改中)
- 学习笔记:javascript定义类的过程(类一词是形象说法,javascript中并没有类一词)