Vue.js安装发布详细流程

       建议Download或者手动搭建一个完整的项目基础(包含vuex、axios、vue-router、express、mock.js以及一个良好的项目文件目录),留存备份,以后开新项目可以npm install安装依赖后直接使用。

       npm install xxx -g /-s/-d 等区别见文末补充

  1. 安装node.js,自行搜索下载(http://nodejs.cn/),建议安装稳定的高版本。

  2. 安装完node.js会附带安装npm(包管理工具),命令提示符里 npm -v 能显示版本则npm安装成功。通过npm install npm -g进行npm的升级。

  3. 安装npm的淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org

  4. 安装webpack npm install webpack -g

  5. 安装vue脚手架 npm install vue-cli -g (vue -V查看vue版本,v是大写的V)

  6. 在本地硬盘创建目录,例如D:/workspace/ 。cd进入该目录。

  7. 创建模板项目 vue init webpack myVueProject 此时会有一些初始化的设置如下:
    (注:此配置是针对低配向,关于ESLint等选项如果有此习惯可自行开启并配置)

    image.png

此时工程已建立完毕,cd进入该目录下(例如 cd D:/workspace/MyProject)。

  1. 安装项目依赖与vue-router模块 (如果在第7步已经有vue-router安装选项则可以跳过vue-router的安装,当然重复安装也不会有问题)

cnpm install
cnpm install vue-router --save

  1. Vue-resource已经过时,所以我们安装axios,cd到项目下 cnpm install axios

  2. 基础环境搭建完毕,cd到项目下 npm run dev运行项目(如果出现某些环境问题重新安装出问题的环境即可,例如出现Vue-Router not found,重新安装vue-router)

  3. 发布项目:npm run build(关于打包后无法直接点击运行的问题:到项目目录下的config文件夹里的index.js文件中的build对象,将assetsPublicPath中的“/”,改为“./”即可) 然后会在你的项目里出现dist文件夹,你的打包内容就在这里(版本不同布局方式不一样,无伤大雅。基于我的版本包含一个index.html和static文件夹,内容如下)

    image.png

  1. 然后,把dist扔到服务器端tomcat的webapps文件夹中或者把dist文件夹的内容拷贝到webapps的ROOT文件夹内即可挂载成功。注意,如果直接挂载大几率出现空白页面,即404错误,请修改index.html里的路径由绝对改为相对。

       修改方式如下:

修改前

修改后
  1. 如果使用express写了跨域服务(服务器以pm2为例),将express文件夹整个扔到服务器端www下,执行pm2 restart all命令即可。
  我的版本: 
node.js:8.9.1
vue:2.9.1  
webpack:3.8.1  
cnpm&npm:5.1.1  
npminstall:3.2.1  
atom:1.6.9   

关于命令参数

  •        npm install axios -g (全局安装)和 npm install axios (本地安装)
           其中参数-g的含义是代表安装到全局环境里面,即安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录。
           在js实例代码中,默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块,因此,如果只是全局安装,不能直接通过require()的方式去引用模块,需要手动解决包路径的配置问题,当然你也可以复制全局安装的node_modules文件夹到项目下,还有办法可以选择将环境变量的NODE_PATH设置为C:\Program Files\nodejs。所以如果采用全局安装,如果项目转移的话会存在找不到包的情况。
    因此,不推荐只全局安装(如果是工具插件可以全局安装,如果是项目需要的依赖则选本地安装)。据node团队介绍,本地安装包对于项目的加载会更快。
  •        npm install axios 和npm install axios -S (npm install axios --save的简写)
           参数-S代表的含义是在安装axios时会修改package.json,默认在dependencies中添加项目生产依赖。这样以后就不用一个个的用npm去安装了,直接执行npm install 会安装dependencies下所有的依赖。
  •        npm install -S和 npm install axios -D (同npm install axios --save -dev)
           -D是package.json中的devDependencie中添加项目开发阶段的依赖。在node package有两种依赖,一种是dependencies一种是devDependencies,其中前者依赖的项该是正常运行该包时所需要的依赖项,而后者则是开发的时候需要的依赖项,像一些进行单元测试之类的包。这里只会在devDependencies中添加依赖
  •        uninstall 和 update 的使用
    uninnstall 和 update 用法基本同install 如卸载开发版本的模块
    m uninstall gulp --save-dev
  •        npm install xxxx --save 可以缩写为npm i -S
  •        npm run start 可以缩写为 npm start
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容