使用webpack搭建Vue项目

前提先安装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/#/ 中的这个#号去掉
    在这里插入图片描述
发布了3 篇原创文章 · 获赞 0 · 访问量 83
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览