webpack+vue初始化项目

第1步:官网下载并安装nodejs

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

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

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

 cnpm install -g vue-cli

②初始化基于webpack的vue项目

vue init webpack project_name

③进入project_name

cd project_name

④安装必要的插件

cnpm install
第4步:运行项目
npm run dev
第5步:打包项目
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即可
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » webpack+vue初始化项目

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活