vue部署手册

vue部署手册
一、从SVN上将代码克隆到本地
二、运行环境搭建
1、安装node.js,从node.js官网下载并安装。安装完成后,打开命令行工具,输入node -v。如果安装成功,会出现对应的版本号,如下图

说明:在官网安装好node.js之后,就已经自带npm(包管理工具)了

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放到服务端

你可能感兴趣的:(vue部署手册)