Vue的安装配置与编译

 时间:2026-02-14 19:07:07

1、先去下载node.js,node.js相当于起到编译器的作用,下载地址:https://nodejs.org/en/download/ ,下载完后进行安装。

Vue的安装配置与编译

2、安装成功后,右键我的电脑进入高级系统设置,并检查nodeJs的环境变量是否添加成功,若添加成功,则可在cmd命令行页面中使用npm命令。

Vue的安装配置与编译

1、Vue的源码有许多的组件库,为了提高安装速度,所以建议切换为淘宝镜像

在cmd中输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,输入后按回车。

Vue的安装配置与编译

2、若切换了淘宝镜像,则npm命令全部变为cnpm,反之用npm即可。

在cmd淘宝镜像模式下输入:  cnpm install -g @vue/cli,输入后按回车。

3、Vue安装成功后,即可使用vue命令创建项目。

1、创建项目时,命令行将提示选择配置方式,不选择default,选择自定义配置,方向键选择,回车进入下一步。

Vue的安装配置与编译

2、根据需求选择所需的项目配置。

主要选择配置说明如下:

Linter/Formatter 不勾选(规范化的前端Vue项目开发需勾选,理由:统一规范,避免格式化的冲突,个人开发不需要,会对代码格式化,和缩进等格式的要求较为严格统一)

Router 路由  没有路由就不是单页面的形式 , 方便做统一判定,权限什么的    

vueX  统一状态管理,文件上体现为 store目录,用途举例:当操作添加商品页面不小心退出时,需保存即时数据,引入后可调用其方法实现状态保存。

使用空格选中或反选 ,个人使用只需勾选 Babel  Router和Vuex 选择后回车进入下一步。

Vue的安装配置与编译

3、然后选择 In package.json  (配置存储在项目目录下的,packae.json中),按回车确认。

Vue的安装配置与编译

4、询问时候存储为项目默认配置, 输入N不保存, 若保存则新项目的配置将提示是否沿用默认配置,通常根据每个项目的需求进行配置,按回车后进入等待页面。

Vue的安装配置与编译

Vue的安装配置与编译

1、加载完成后,将提示  1.cd XXX    2.npm run serve。

根据其提示输入cd xxx后进入vue项目地址后输入第二个命令即可运行项目。 ps:若在淘宝镜像下,改用cnpm run serve。

静候几秒,出现该页面即为项目运行成功,可通过http://localhost:8080/访问项目。

Vue的安装配置与编译

2、通过http://localhost:8080/访问项目,项目成功运行之后,即可开始进行编码与调试工作。

Vue的安装配置与编译

3、当项目最终完成后,可通过 npm run build 或淘宝镜像下的 cnpm run build进行编译,编译完成后会生成dist文件目录。

Vue的安装配置与编译

4、dist为系统编译后的文件,注:vue项目中所引入的组件库,仅有用到的会被编译到dist中,因此可直接将dist文件放置服务器环境下运行,只需注意路径等问题即可。

  • source insight快捷功能介绍
  • qt怎样添加工具栏?
  • 在windows中怎样安装qt
  • C++编辑器如何使控制台窗口暂停
  • Java 将Excel工作簿按工作表拆分为多个文档
  • 热门搜索
    我们的节日春节手抄报 制作手抄报 端午节英语手抄报 一年级清明节手抄报 关于马的手抄报 劳动节手抄报内容 爱护牙齿手抄报 手抄报疫情 关于法制教育的手抄报 元旦手抄报文字