Vue使用NPM方式搭建项目

一、安装前说明

环境依赖： node.js ；

vue官方脚手架 ： vue-cli ；

包管理工具： npm

模块化打包工具： webpack

安装 node.js会默认安装npm，vue-cli依赖npm来安装 。

二、 安装 node.js

安装 node.js 可以直接从官网下载安装，基本是一直点下一步即可。

安装完成后查看 node 版本： node  -v

安装完成后查看 npm 版本： npm  -v

三、创建项目

选择 webpack作为打包工具，初始化项目，项目名是front-project。安装过程按照提示填写相关配置（默认按Enter键即可）， 这些配置最终会写到项目的 package.json 并且安装相关模块。

E:\Tool>vue init webpack front-project

创建好的项目的结构：

项目结构说明可以参考菜鸟教程：

http://www.runoob.com/vue2/vue-directory-structure.html

四、运行项目

进入到项目里面，然后运行命令：

npm run dev

或者进入到项目里面，然后运行命令（指定端口）：

PORT=8090 npm run dev

总结

以上所述是小编给大家介绍的Vue使用NPM方式搭建项目，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 用Vue-cli搭建的项目中引入css报错的原因分析

    用Vue-cli搭建的项目中引入css报错的原因分析

    我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧! 1.问题描述 之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错.下如图 经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, includ

  • Django+Vue.js搭建前后端分离项目的示例

    Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法

    1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use *** nrm use taobao // 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3.

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩

  • 基于mpvue的小程序项目搭建的步骤

    基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • Vue使用NPM方式搭建项目

    一.安装前说明 环境依赖: node.js : vue官方脚手架 : vue-cli : 包管理工具: npm 模块化打包工具: webpack 安装 node.js会默认安装npm,vue-cli依赖npm来安装 . 二. 安装 node.js 安装 node.js 可以直接从官网下载安装,基本是一直点下一步即可. 安装完成后查看 node 版本: node  -v 安装完成后查看 npm 版本: npm  -v 三.创建项目 选择 webpack作为打包工具,初始化项目,项目名是front-

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • 使用vue-cli（vue脚手架）快速搭建项目的方法

    使用vue-cli（vue脚手架）快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli, 但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效. 然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的

  • 基于Vue和Element-Ui搭建项目的方法

    首先要求事先安装node和npm 没有安装的自行百度或在论坛里面搜索! 提示:在命令行分别输入node -v(node和-v之间有个空格) 和npm -v(同样有个空格)可查看当前的node和npm版本 创建vue项目 1.创建一个项目文件夹,记住文件夹路径,如我的是F:\AppCode 2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode. 输入npm install -g cnpm –registry=https://registry.npm.taobao.org安装

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 正式版于 8月10号发布,但是3.0 与 2.0 版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友 1. 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后,有以下两种创建项目的方式: a . 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就

随机推荐