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

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

运行打包后的内容

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js中该如何自己维护路由跳转记录

    前言 在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情. 解决方案就是,我们自己来维护一份history跳转记录. 案例与使用场景 代码地址:https://github.com/dora-zc/mini-vue-mall (本地下载) 这是一个基于Vue.js的小型商城案例,应用场景: 自己实现一个Vue插

  • 新手简单了解vue

    新手简单了解vue

    前言 作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法,刚好今天没事就给自己挖一个坑,分享一下我对vue的见解和一些领悟,整个专栏应该会包括vue,vue-cli,vue-router,vuex,nuxt和一些webpack的简单入门,当然实战项目也一定会放出来,更新频率视手头的项目进度而定,话不多说,开始今天的第一篇专栏. vue是什么?为什么我们要使用vue? 说到了vue,我们就不得不先聊一下vue是什么以及为什么我们要使用vue,他能给我们的开发带来什么样的便利呢?

  • Vue.js轮播图走马灯代码实例（全）

    Vue.js轮播图走马灯代码实例（全）

    话不多说先上效果图,本文引荐链接https://www.jb51.net/article/129112.htm 这个是html, <template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click=&q

  • Vue.js构建你的第一个包并在NPM上发布的方法步骤

    Vue.js构建你的第一个包并在NPM上发布的方法步骤

    本文我们将学习如何制作一个vue插件,并将其分发到npm上,能够让其他人安装使用. 插件大大地提高了开发者的开发效率.我们的大多数项目都依赖于它们,因为它们能够以极快的速度发布新功能. 正如官方Vue.js文档中所述,插件的范围没有限制.通常我们想实现的功能有下面5种: 添加全局方法或者属性 (如: vue-custom-element) 添加全局资源:指令/过滤器/过渡等 (如:vue-touch) 通过全局 mixin 方法添加一些组件选项 (如:vue-router) 添加 Vue 实例方

  • vue.js表单验证插件(vee-validate)的使用教程详解

    vue.js表单验证插件(vee-validate)的使用教程详解

    综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

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

    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 安装webp

  • vue项目环境搭建 启动 移植操作示例及目录结构分析

    vue项目环境搭建 启动 移植操作示例及目录结构分析

    目录 项目搭建 项目创建 项目启动停止 项目目录结构分析 全局脚本配置 index.html详细介绍 main.js入口文件详细 App.vue跟组件介绍 router-index.js 路由介绍 项目搭建 下载node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm,用淘宝源: npm install -g cnpm --registry=https://registry.npm.taobao.org 检测是否安装成功:cnpm -version

  • vue项目环境搭建

    一.node.js下载和安装 官网下载安装nodejs,会自动捆绑安装npm,具体步骤省略. 二.express 安装 npm install express -g npm install -g express-generator -----g在前不会安装到全局(坑) npm install express-generator -g 全局安装 三.安装教脚手架 3.1 安装或更新全局vue npm install vue -g 3.2 安装或更新全局路由: npm install vue-rou

  • 基于Vite2.x的Vue 3.x项目的搭建实现

    创建 Vue 3.x 项目 npm init @vitejs/app my-vue-app --template 引入 Router 4.x npm install vue-router@4 --save 配置路由 在更目录中添加一个 router 的文件夹,新建 index.js Router 4.x 为我们提供了 createRouter 代替了 Router 3.x 中的 new VueRouter,用于创建路由. // Router 4.x import { createRouter,

  • Linux虚拟机中node.js之开发环境搭建

    Linux虚拟机中node.js之开发环境搭建

    先说下nodejs这个哦,有人以为它是一种语言,其实不是,它是一个平台.下面来说下本次的话题:Vmware虚拟机node.js之开发环境搭建 一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这里使用Vmware. 安装好Vmware后,点击新建虚拟机,选择稍后安装操作系统,然后进行配置.虚拟机设置如下: { 客户机操作系统:其他: 版本:其他64位

  • django项目环境搭建及在虚拟机本地创建django项目的教程

    django项目环境搭建及在虚拟机本地创建django项目的教程

    1.Python虚拟环境创建 首先我们为什么要创建虚拟环境呢?因为不同的项目所依赖的环境不一样,他们需要不同的第三方库等等.为了避免冲突,所以我们要创建虚拟环境,在次此我用的的Linux ubuntu和pycharm. 在虚拟机上创建Python虚拟环境命令为: mkvirtualenv -p /usr/bin/python3 虚拟环境名字 (-p参数选择虚拟环境要用的Python解释器) 2.创建django项目 第一步:进入到你要创建项目的目录 cd ~/project 第二步:安装djan

  • Golang环境搭建及打包和工具链详解

    目录 一.环境搭建 二.包 三.导入 四.init函数 五.一些常用go命令 一.环境搭建 从https://golang.google.cn/dl/下载安装即可 新建GO_HOME 系统环境变量,指向go的安装目录在终端输入go dev即可测试有无安装成功 二.包 所有Go程序的程序都会组织成若干组文件,每组文件被称为一个包.每个包的代码都可以作为很小的复用单元,被其他项目引用.①所有的go文件都应在第一行声明自己所属的包.每个包都在一个单独的目录里.这意味着同一个目录下的所有.go文件都必须

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)

    目录 1. Nuxt3的安装 1.1. 安装新建Nuxt3 项目 1.2. Nuxt3的启动使用 1.3. Nuxt3 运行端口 2. element-plus的安装配置 2.1. 演示使用 3. scss安装和全局变量配置 3.1. 使用 3.2. 外部导入使用 3.3. 全局配置使用 4. 拓展:Corepack 自动装载 pnpm 小聊: 本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置

  • 深度学习环境搭建anaconda+pycharm+pytorch的方法步骤

    深度学习环境搭建anaconda+pycharm+pytorch的方法步骤

    目录 显卡 驱动 cuda anaconda 1. 下载安装 2. 安装pytorch虚拟环境 3. conda常用指令 pycahrm / jupyter 下载安装 如何建好的虚拟环境的解释器找出来指派给代码? 本文将详细介绍一下如何搭建深度学习所需要的实验环境. 这个框架分为以下六个模块 显卡 简单理解这个就是我们常说的GPU,显卡的功能是一个专门做矩阵运算的部件,用于显示方面的运算,现在神经网络中绝大操作都是对矩阵的运算,所以我们当然可以将显卡的矩阵运算功能应用起来,来提高计算速度. 驱动

随机推荐