第一节 —— vue2.0 环境安装,工程化开发

时间:2023-03-10 06:56:01
第一节 —— vue2.0 环境安装,工程化开发

vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。

所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。

1.先声明,如果用vue进行工程化开发,首先要有node.js,然后再下一个npm,不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目,用指令:

第一节 —— vue2.0 环境安装,工程化开发

2.博主本人声明的文件名为firstvue,下载好后一路enter,之后便生成了一个vue项目,但是这个vue项目还没有一些相关的依赖,这个时候需要进入到该文件夹里面,输入指令:

第一节 —— vue2.0 环境安装,工程化开发

3.如果网速不好,则用cnpm install,效果一样。略等几分钟后整个依赖便已经下完,之后输入指令:

第一节 —— vue2.0 环境安装,工程化开发

则会自动打开一个界面,如果报错不能打开网页的话只有一种原因,那就端口占用,这个时候需要到/config/index.js目录下改端口就行。

第一节 —— vue2.0 环境安装,工程化开发

4.构建好之后,生成个地址,在浏览器打开,就能看到你的vue页面了。

http://localhost:8080/

第一节 —— vue2.0 环境安装,工程化开发