锐客网

  1. 首页 > it技术 > >

vue部署手册

vue部署手册
一、从SVN上将代码克隆到本地
二、运行环境搭建
1、安装node.js，从node.js官网下载并安装。安装完成后，打开命令行工具，输入node -v。如果安装成功，会出现对应的版本号，如下图
说明：在官网安装好node.js之后，就已经自带npm（包管理工具）了
【vue部署手册】2、npm安装淘宝镜像的cnpm，在命令行中输入：
npm install -g cnpm --registry= https://registry.npm.taobao.org
（镜像官网：http://npm.taobao.org/）
安装完成之后输入 cnpm -v，如果安装成功，会出现对应的版本号
3、安装webpack，命令行输入：npm install webpack -g
安装完成之后输入 webpack -v，如果安装成功，会出现对应的版本号
4、安装vue-cli脚手架构建工具，命令行输入：npm install vue-cli -g
安装完成之后输入 vue -V（注意这里是大写的“V”），如果安装成功，会出现对应的版本号
三、使用vue-cli构建项目
1、在硬盘中找一个文件夹放项目
2、安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice ” 是项目的名称。不能为中文
vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project description (A Vue.js project) ---------------------项目描述
? Author xx --------------------- 项目创建者
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
3、cd 命令进入创建的工程目录，首先cd exprice（这里是自己建工程的名字）；
4、安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。
5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。
创建完成的“exprice”目录如下：
6、启动项目，输入：npm run dev。
四、发布
1、基于Vue-Cli,通过npm run build来进行打包的操作
2、将打包出来的资源，dist文件夹，static文件夹以及index.html放到服务端

    推荐阅读


    上一篇：粉红色的的确良上衣

    下一篇：水熊科技悟空掌柜有什么与众不同的地方