webpack和webpack cli区别
cli 是 command line interface 即命令行界面。
webpack cli也就是webpack的命令行界面。可以通过在终端输入命令的方式配置,启动webpack
vue文件怎么运行
vue文件怎么运行呢?下面就跟小编一起来看一看吧。
工具/原料
PC
方法/步骤
1、首先,列出来我们需要的东西: node.js环境(npm包管理器)vue-cli 脚手架构建工具cnpm npm的TB镜像
2、如果你是用vue-cli webpack builid之后,放到web服务器,访问index.html就可以运行了。
3、常见的web服务器有tomcat,nginx等。推荐使用nginx。
4、在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。
5、 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。END
注意事项
如果看不懂,请教专业人员。
vue项目为啥要启动
因为vue是单页面应用,vue是依靠数据进行驱动来更新数据的。而数据来源于后端,需要vue与后端通过接口通信来获取数据信息。
而后端是需要项目启动的,所以vue项目也需要启动,配置端口,打包发布到服务器上面才能正常运行。
vue项目的启动是是通过webpack命令进行启动,使用命令npm run dev就可以启动vue项目了
clique怎么设置
安装
vue cli 2
vue cli 3
需要注意的是如果希望安装 vue-cli 3,而环境里已安装 vue-cli 2,则需要使用指令
进行卸载后,再安装 vue-cli 3
使用
这里是使用脚手架初始化项目的指令,而这里的 webpack 指的不是 webpack 本身,而是预设好的一套完整版 webpack 配置的模板。我个人习惯使用 webpack-simple 模板
完整的模板列表,请访问
vuejs-templates
项目vuejs-templates
vue-cli 3
在 vue-cli 3 中使用以下指令创建项目:
执行后,同样是有配置向导一步步指引着配置步骤,这里跟 vue-cli 2 一致,但个人是使用
以图形界面的方式来创建项目,很方便好用。
使用 vue-cli 脚手架配置并初始化项目后,不论是 vue-cli 2 还是 vue-cli 3,脚手架所提供的均为项目的配置以及依赖的库设置,安装依赖库(npm i)的步骤依然需要手动执行的(vue ui 模式例外,该模式创建项目后,可以在创建后自动下载依赖库)
所以在脚手架配置好项目后,统一执行 npm i 来安装所有依赖库即可,不需要单独再去安装 webpack
还没有评论,来说两句吧...