使用webpack搭建Vue项目(vue2.0)

前提先安装node.Js,nodejs带npm

在D盘下创建一个vuetest空文件夹,命令行切换路径到该文件下,
首先查看一下是否安装对应的模块环境,没有的按照下面的命令进行安装
在这里插入图片描述

  1. npm install -g webpack //全局安装webpack
  2. npm install -g webpack-cli //全局安装webpack-cli
接下来使用vue-cli脚手架构建项目
  1. npm install -g vue-cli //全局安装vue-cli
    安装完成后,输入 vue -V 可以查看安装的版本
    在这里插入图片描述
  2. vue init webpack myvue //创建myvue项目
    在这里插入图片描述
    Use ESLint to lint your code? 这个规范代码用的,多一个空格都会报错,强烈建议选no。
    Setup unit tests with Karma + Mocha 、Setup e2e tests with Nightwatch?这两个是测试,可以不用安装
  • 等待安装完成后,就可以运行项目了
    1、cd myvue //切换到项目目录
    2、npm run devnpm start //运行项目
    在这里插入图片描述
    最后打开浏览器输入localhost:8080,看到下面的页面,即一个vue项目成功搭建。
    在这里插入图片描述
    项目结构
    在这里插入图片描述
  • 打开router文件夹下面的index.js文件
    mode: 'history', 添加这行代码将地址栏localhost:8080/#/ 中的这个#号去掉
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值