美文网首页
vue+webpack初体验

vue+webpack初体验

作者: 脑袋炸了 | 来源:发表于2017-08-25 13:54 被阅读0次

step1:

检查本地是否安装node: node -v

没有安装先安装最新的node。

如果已经安装了想要升级,可以先安装n模块,用n模块来升级

安装n模块 :  npm install -g n

升级 n stable

n后面也可以跟版本号更新到指定版本 比如 n v0.10.26

step2:

检查npm版本 :npm -v

如果版本低可以升级:npm install -g npm

step3:

安装webpack,推荐全局安装:npm install webpack -g

step4:

安装vue-cl:npm install vue-cli -g

step5:       //如果上面的都准备好了,可以把这个当成step1

cd到一个你准备放文件的文件夹

创建项目: vue init webpack 工程名(其中webpack是模板名,有这些模板webpack,webpack-simple ,browserify ,browserify-simple ,simple,这里使用webpack作为示例)

接下来会有询问,默认的直接回车,有要选择的根据需要选择yes或no。

step6:

已经创建了一个工程,比如叫webapp。

cd到webapp

然后npm install

到这里你的工程就已经ok了

如果想在本地运行 : npm run dev (会直接打开localhost,默认8080端口,可以更改端口,在config/index.js里面找)

如果想打包 : npm run build (会生成一个dist文件夹,dist文件夹里面的内容放到服务器就行了)

另外,需要更改打包资源的目录的,更改一下config/index.js里面的assetsPublicPath就行了

相关文章

  • vue+webpack初体验

    step1: 检查本地是否安装node: node -v 没有安装先安装最新的node。 如果已经安装了想要升级,...

  • Vue项目实例参考

    1. 参考文档 原教程地址 vue+webpack项目实战 vue+webpack app项目(1) https:...

  • 如何安装vue

    1、vue+webpack安装,生成初始化vue项目vue+webpack安装,生成初始化vue项目_前端劝退师儿...

  • yii初体验(7-15)

    yii初体验(7)视图 yii初体验(8)模块 yii初体验(9) 小部件widgets yii初体验(10) 前...

  • vue-cli搭建项目记录

    创建vue+webpack项目vue init webpack 2.eslint: Newline require...

  • 动画篇-layout动画初体验

    动画篇-layout动画初体验 动画篇-layout动画初体验

  • 2017-5-9

    今天继续看了JavaScript系列,好像发生了什么。导致有点奇怪。继续努力。vue+webpack

  • SPA前端后端框架简述

    最近开发一个单页面应用(Single Page Application), 前端用Vue+Webpack, 后端用...

  • 劳动主题画报

    一、实践画报(含体验日记) _____初体验(如:记者初体验、医生初体验等) 说明: 1.利用假期亲身体验一项工作...

  • 【vue+webpack】

    安装基本环境: node.js npm install -g vue-cli vue init webpack ...

网友评论

      本文标题:vue+webpack初体验

      本文链接:https://www.haomeiwen.com/subject/gyfxhxtx.html