首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >webpack+vue初始化项目

webpack+vue初始化项目

作者头像
青梅煮码
发布2023-02-18 16:38:21
发布2023-02-18 16:38:21
4650
举报
文章被收录于专栏:青梅煮码青梅煮码
第1步:官网下载并安装nodejs

nodejs官网:http://nodejs.cn/download/

第2步:npm下载插件速度很慢,推荐安装淘宝镜像cnpm
代码语言:javascript
复制
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
第3步:创建项目

①安装vue-cli脚手架构建工具

代码语言:javascript
复制
 cnpm install -g vue-cli

②初始化基于webpack的vue项目

代码语言:javascript
复制
vue init webpack project_name

③进入project_name

代码语言:javascript
复制
cd project_name

④安装必要的插件

代码语言:javascript
复制
cnpm install
第4步:运行项目
代码语言:javascript
复制
npm run dev
第5步:打包项目
代码语言:javascript
复制
npm run build
注意事项:

在打包后,如果程序路径报错,在config文件夹下的index.js修改build下的assetsPublicPath:’./’程序就能正常运行

  1. 使用vue-cli非常方便快速,它可以为我们生成基本的Vue的项目结构。 检测npm版本,在终端输入 npm -v 全局安装vue-cli,在终端里输入,npm install -g vue-cli 在终端中输入 vue init webpack vueTest(项目名称可自定义)根据情况选择Y/N

  1. 等到上面这些都正确安装完成后,我们需要验证一下,我们安装是否成功。 使用npm run dev 进行测试环境的打开 在浏览器中输入 http://localhost:8080 进行测试 如果没用自动打开浏览器,可以找到config/index.js中修改 autoOpenBrowser: true即可
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第1步:官网下载并安装nodejs
  • 第2步:npm下载插件速度很慢,推荐安装淘宝镜像cnpm
  • 第3步:创建项目
  • 第4步:运行项目
  • 第5步:打包项目
  • 注意事项:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档