最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

来源:动视网 责编:小采 时间:2020-11-27 21:57:48
文档

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

vue.js 2.*项目环境搭建、运行、打包发布的详细步骤:Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直
推荐度:
导读vue.js 2.*项目环境搭建、运行、打包发布的详细步骤:Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直


Vue 安装

vue-cli /webpack 全局安装

如果在意安装速度,可以使用淘宝镜像来安装

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦

我个人比较喜欢直接使用npm 安装:

全局webpack:

npm install webpack -g

vue脚手架vue-cli:

npm install vue-cli -g

安装webpack 版vue 项目

在指定的目录中打开命令窗口(编辑器中自带的命令窗口也可以)

vue init webpack myvuedemo

  • Project name (回车默认)
  • Project description (A Vue.js project) 回车默认 (也可以输入自己的描述)
  • Author 回车默认(自己的名字)
  • Vue build 默认选择 Runtime+Compiler
  • Install vue-router?Y 安装

    Use ESLint to lint your code? Y (推荐使用,保持良好的代码编写规范)

    pick an eslint preset. 默认 Standard

    set up unit tests ? n (unit 测试,不需要)

    setup e2e tests with Nightwatch?n (e2e 测试,不需要)

    Should we run npm install for you after the project has been created? (recom
    mended) npm (选用 npm )

    安装完毕

    目录结构

    Vue运行

    运行命令

    cd myvuedemo
    npm run dev

    运行成功

    页面内容

    Vue build 打包

    打包命令

    npm run build

    打包后的目录结构

    运行打包项目

    需要开启服务运行

    使用http-server 运行(如没有安装http-server的,使用node 全局安装 http-server 即可,npm install http-server -g)

    cd dist
    http-server

    运行打包后的内容

    从搭建到运行打包发布全部完成,是不是很简单呢?

    文档

    vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

    vue.js 2.*项目环境搭建、运行、打包发布的详细步骤:Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直
    推荐度:
    标签: 安装 打包 VUE
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top