美文网首页Vue
vue部署手册

vue部署手册

作者: _daraDu | 来源:发表于2019-02-22 16:24 被阅读12次

    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
    安装完成之后输入 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部署手册

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