vue学习过程的个人笔记

vue学习过程的个人笔记

我学习和使用angular也有两年了。期间也接触过react,vue,简单地学习过。现在也想好好学一下vue,于是我在这里记录一下学习的大概过程。

安装vue-cli

之前用嵌入script标签的方式撸过一遍vue的一些特性,包括vue-router。这里我使用vue-cli的方式来安装一下。

1
npm install --global vue-cli

生成vue项目

1
vue init webpack vuecms

命令中的webpack是指生成一个基于webpack的项目。
vue-cli生成项目过程的最后一个会提示你选择是否自动执行npm install,我选择了yes,或者cd到项目目录下运行npm install安装依赖也可以。安装依赖的时间有点长,请耐心等待!

启动vue项目

1
npm start

该命令会执行npm run dev,默认端口是8080,我个人喜欢改端口,在dev脚本后加上–port=3200即可。

打包vue项目

1
npm run build

运行该命令后,会执行build.js。webpack的配置文件主要涉及build和config两个目录,后面修改这两个目录中的文件应该可以进行定制。

我们build项目之后,直接把index.html拖到浏览器中是不可以访问的。要么放在服务器上进行访问,要么就是使用http-server进行测试。

1
npm install -g http-server

安装http-server后,我们cd到dist目录下,启动http-sever

1
2
// 键入这个命令即可启动http-server服务
http-server

然后我们就可以通过http://127.0.0.1:8080/index.html访问打包后的项目了。


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×