vue.js:搭建开发环境及构建项目

羊羊羊丶      2022-02-13     576

关键词:

 

发环境的搭建

安装node.js

直接下一步就好, 注意安装的位置 

Node.js官网:https://nodejs.org/en/

验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v即可得到对应的Node.js版本。

 

npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。 
输入npm -v可得到npm的版本。

注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0,输入以下命令更新npm至最新版本。

npm -g install npm

安装cnpm

由于资源的限制,安装npm依赖包的时候经常失败,建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。

npm 国内镜像 https://npm.taobao.org/

在命令行中输入以下内容等待安装

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

cpnm全局安装vue-cli

在命令行中运行以下命令然后等待安装

cnpm install -g vue-cli

 

构建项目

新建项目

在这里我将vue项目建在D盘的demo文件夹下,利用命令进入此目录。在cmd中输入盘符D:回车即可进入D盘:

 

输入命令 cd demo跳到此目录下:

 

 

在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:

vue init webpack myvuedemo

 

 上面一步完成之后输入:

cd myvuedemo 

进入项目之后安装

npm install

最后 --  跑起来

 

 成功!

 

然后自动弹出页面 , 若没有弹出,手动输入

http://localhost:8080

 

 

 成功! 皆大欢喜!

注:

第一个是进入myvuedemo 文件夹
第二局是安装所需要的以来 就是pageckage.json里面的。 你是用npm install * --save 就会保存在这json里面 你下次发给别人的时候 就可以把node_module 不发送出去(因为很大) 然后别人在npm install 就可以直接安装组件
npm run dev这是一个自定义命令 也是在package.json里面进行修改的

这些就是命令 npm run dev ,  npm run start.  npm run build. npm run unit

你也可以将它写入全局, 以后直接在命令行里面直接dev xxx 

就像你的npm install * 一样 像npm一样在任何一个角落用

 

vue开发(开发环境+项目搭建)

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文... 查看详情

windows下搭建vue开发环境

...前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建。一、node.js安装Vue项目通常通过webpack工具来构建,而webpack命令 查看详情

vue.js开发环境搭建

一、NODEJS的安装Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。 二、NODE.JS的环境变量的新建。   其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装... 查看详情

搭建vue开发环境

...:npminstall-gcnpm--registry=https://registry.npm.taobao.org   3.搭建vue的开发环境,安装vue的脚手架工具(进入vue目录)  npminstall--globalvue-cli   4、创建项目(必须cd到对应的一个项目里面)  vueinitwebpackvue-demo01   cdvue-dem... 查看详情

vue.js项目的开发环境搭建与运行(代码片段)

写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看)。1开发环境安装步骤:(一)安装node.js(JavaScript运行环... 查看详情

vue.js开发环境搭建以及创建一个vue实例

...的数据绑定和组合的视图组件。在使用vue.js之前首先需要搭建vue.js的开发环境,下面,我们就来一步一步的搭建vue.js的环境:1、首先,我们需要安装node.js:  安装node.js请参考 node.js安装配置 ,可以打开命令行, 查看详情

基于webpack的vue.js开发环境快速搭建

1.安装nodenode下载地址2.安装淘宝NPM镜像命令地址3. 安装vue#全局安装vue-clicnpminstall-gvue-cli4. 创建一个基于"webpack"模板的新项目#创建一个项目文件夹,在文件夹下shift+右键,选择在此处打开cmdvueinitwebpack5.安装依赖#安装依赖c... 查看详情

萌新--关于vue.js入门及环境搭建

十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西。在淘宝上买了相关视频,前两章简介听得懵懵懂懂的,能够... 查看详情

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下最近,vue.js越来越火。在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教... 查看详情

vue项目目录结构详解(代码片段)

项目简介基于vue.js的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用ESNext、scss等最新语言特性。项目包含:基础库:vue.js、vue-router、vuex、whatwg-fetch编译/打包工具:webpack、babel、node-sass单元测试工具:karma... 查看详情

vue项目搭建和运行

...行GitHub上的开源项目,很尴尬。通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家。 首先,列出来我们需要的东西:  node.js环境(npm包管理器)vue-cli... 查看详情

基于mintui开发vue项目一之环境搭建和头部底部导航栏的实现

一:简介MintUI包含丰富的CSS和JS组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大... 查看详情

vue入门环境搭建

...开发前端框架,首先要有环境,所以给大家介绍一下如何搭建vue环境。其实很简单:1.首先下载安装node.js。  去官网https://nodejs.org/zh-cn/下载安装包。2.安装webpack  打开cmd命令界面,输入npminstallwebpack-g会自动安装。  如图... 查看详情

vue3组件开发:搭建基于spreadjs的表格编辑系统(环境搭建)(代码片段)

Vue是一套用于构建用户界面的渐进式框架,与其它大型JS框架不同,Vue被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动。2020年09月18日,Vue.js3.0正式... 查看详情

vuejs之开发环境搭建

Vue.jsVue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用,特别适合单页应用的开发。Vue.js是数... 查看详情

vue项目搭建记录

...网看教程,按照教程指点,可以不用脚手架开发,也可以搭建开发环境。这里记录下搭建过程(教程参考网上各前辈提供的资料):安装Node.js:从Node.js官网安装Node.js。  安装完成后,直接在命令提示符(win+R=>输入cmd)中... 查看详情

vuejs开发环境搭建及热更新

推荐使用官方提供的命令行工具,可用于快速搭建大型单页应用。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置项目。1、安装node  https://nodejs.org/en/download/由于有些npm有些资源被屏蔽或者... 查看详情

vuejs2.0构建一个彩票查询webapp(代码片段)

...技术栈为vue2+vuex+axios+vue-router+mintUI备注:Vue.js开发环境的搭建,参见window下搭建Vue.Js开发环境一,构建项目脚手架在我的工作区下输入vueinitwebpackLottery,会自动构 查看详情