zl程序教程

您现在的位置是:首页 >  其他

当前栏目

使用nodejs&webpack&vue-cli脚手架工具搭建项目

2023-09-14 09:04:07 时间

搭建环境:

1,使用淘宝npm镜像:

http://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

2,安装脚手架工具
 

cnpm i vue-cli -g

3,安装webpack(如果没有安装webpack的话,新建项目vue init webpack Demo6可能会一直转圈,安装webpack后。成功)

cnpm install -g webpack

4,新建初始化项目(vue init webpack-simple这样的方式适合小项目,vue init webpack这样的方式适合中大型项目):

大项目:

vue init webpack Demo6

系统自动安装了所需依赖包:

当我自己主动去安装依赖的时候。提示已经安装了:

运行:

cnpm run dev

运行成功:

 

 

目录结构:

*************************

小项目:

vue init webpack-simple Demo5

安装所需依赖插件包

cnpm install

目录结构:

两种结构对比:

域名也有点差别:

大项目:webpack

http://localhost:8080/#/

小项目:webpack-sample

http://localhost:8080/

 

5,使用命令运行项目

cnpm run dev

运行成功:

ctrl+c结束项目。

运行名字可能有差异。要看不同文件里面的描述:

 

如果在网上找到好项目。下载下来以后。需要先下载安装依赖cnpm i然后看package.json里面的运行命令,然后运行即可。