搭建一个vue+webpack的前端项目

1.电脑上已经安装了nodeJs,检查cmd进入命令行,输入命令:node -v,显示有版本号,说明已安装。

搭建一个vue+webpack的前端项目_第1张图片

2.电脑上已经安装了npm(NodeJS一起安装的包管理工具),一般在安装nodeJs的时候,会自动安装npm;检查是否安装了nodeJs的方法,cmd进入命令行输入命令:npm -v,显示有版本号,说明已安装。

搭建一个vue+webpack的前端项目_第2张图片

3.使用npm安装vue-cli:输入命令:npm install vue-cli -g 

搭建一个vue+webpack的前端项目_第3张图片


4.在本地新加一个文件夹huidoo,cmd命令行进入到该文件夹下,输入命令:vue init webpack yhtpc(yhtpc为项目名),这一步是搭建一个webpack的项目,输入后会有一系列提示,直接回车就可以啦。这时候在刚才建立的文件下会生成一个名为yhtpc的目录,下面有一系列的文件夹和文件。

搭建一个vue+webpack的前端项目_第4张图片

 

5.cmd进入新生成一个名为yhtpc的目录下,输入命令npm install,这一步是安装依赖,即安装所有的模块,如果是安装具体的哪个个模块,在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装(这个文件里面是不允许有任何注释的),每个使用npm管理的项目都有这个文件,是npm操作的入口文件。因为是初始项目,还没有任何模块,所以我用npm install 安装所有的模块。安装完成后,目录中会多出来一个node_modules文件夹,这里放的就是所有依赖的模块。

 

搭建一个vue+webpack的前端项目_第5张图片

6.输入命令npm run dev,启动项目,这时候在浏览器输入 http://localhost:8080可以访问的。

搭建一个vue+webpack的前端项目_第6张图片

你可能感兴趣的:(web前端)