0
点赞
收藏
分享

微信扫一扫

webpack+vue搭建环境到发布

webpack+vue搭建环境到发布_github

webpack+vue搭建环境到发布


webpack+vue搭建环境到发布_命令行_02


一、环境搭建

1.1、去官网​安装node.js​( http://www.runoob.com/nodejs/nodejs-install-setup.html  )

     注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

下载安装包之后直接点击安装即可。

1.2、​利用npm安装webpack​ 命令行语句为npm install webpack -g  。

1.3、下面就是安装淘宝镜像,如下图:

        npm install -g cnpm --registry=https://registry

        使用的时候就是cnpm下载


1.4、接下来就是​全局安装vue-cli​。需要注意的是使用npm安装vue-cli的时候时间很久,可能会超过两个小时

    安装语句为:npm install --global vue-cli

webpack+vue搭建环境到发布_项目文件_03

1.5、​创建一个基于webpack模板的新项目

命令行语句为vue init webpack my-project  (其中my-project为文件名称,并且文件名只能是小写字母)。在创建模板新项目的时候需要进入到指定的文件夹下面去。

在cmd里输入vue init webpack my-project (项目文件夹名),回车后,等待一小会儿,依次出现‘git’下的项,可按下图操作

webpack+vue搭建环境到发布_github_04

可以看见文件夹多了许多文件

webpack+vue搭建环境到发布_命令行_05

5.​安装依赖

在cmd里  1).输入:cd my-project(项目名),回车,进入到具体项目文件夹

             2).输入:cnpm install,回车,等待一小会儿

webpack+vue搭建环境到发布_项目文件_06

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的默认项目结构如下图所示:

webpack+vue搭建环境到发布_github_07


7.测试环境是否搭建成功

方法1:在cmd里输入:cnpm run dev

              (显然每次修改代码,每次去cmd输入命令是个很繁琐的过程,所以在webstorm中调出npm菜单。

在package.json文件上点击右键—〉点击show npm scripts  即可调出菜单,以后运行只需​在npm菜单里双击dev​.

       注意在命令行运行项目和dev运行项目不可一起进行,进行一个时需将另一个关闭,否则会报端口已被占用的错误。

 )


我把俩个源码放在我得github上了  这是俩个git仓库地址

https://github.com/zhjing1019/webpack-vue.git

https://github.com/zhjing1019/webpack-vue2.0-iview-.git


webpack+vue搭建环境到发布_命令行_08

Winter




sdzfgdhg

javascript艺术 一个有用的公众号

webpack+vue搭建环境到发布_github_09

webpack+vue搭建环境到发布_项目文件_10

长按,识别二维码,加关注




举报

相关推荐

0 条评论