Vue.js项目的开发环境搭建与运行

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

1 开发环境安装步骤:

(一)安装node.js(JavaScript运行环境runtime)

node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以完成。

完成之后,开发命令行工具,输入

node -v

如果出现相应的版本号,则说明安装成功。

另外,npm是node.js下的包管理器,npm能很好的和诸如webpack或Browserify模块打包器配合使用。

npm包管理器是集成在node中的,因此安装好node.js之后,直接输入

npm -v

可以查看到npm的版本信息。

(二)获取node.js模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

(三)安装全局的webpack(vue的组件都是.vue或者向微信小程序的.wxml或者.wxss等自定义组件都无法被用户端的浏览器解析,需要使用webpack编译和打包成js文件)

npm install webpack -g

(四)安装vue脚手架vue-cli

npm install vue-cli -g

2 创建一个vue.js项目并运行

(一)找一个合适的位置存放你的Vue项目

cd 目录路径 

注:目录路劲直接把创建好的文件夹拖拽到终端就行了

(二)创建项目

vue init webpack-simple 项目名

如:vue init webpack-simple vue_project

注:项目名不可以使用中文,也不能使用大写字母

运行初始化命令的时候会让用户输入基本基本的选项,如项目名称、描述、作者等信息,如果不想填直接一路回车默认就行。

这个命令的意识是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。

(三)将根目录切换到项目

cd 项目名

如:cd vue_project

(四)安装项目依赖

npm install

注:运行完上面的命令后,项目文件夹中会多出一个package-lock.json文件

================>>>>>>>>

(五)安装vue路由模块vue-router和网络请求模块vue-resource

npm install vue-router vue-resource --save

注:安装完成后,项目文件夹中会多出一个node_modules文件夹,这里面就是我们项目所需要的依赖包资源

================>>>>>>>>

(六)启动项目

npm run dev

注:项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

3 运行一个已存在的Vue项目

没有依赖库的项目是运行不起来的,也许你从代码服务器上面拉下来的Vue项目只有几百kb(因为一般不会将项目的依赖库放入代码的版本控制器中进行跟踪),因此当你开始要接受别人的Vue项目时,你需要为它下载好依赖库。

(一)将根目录切换到项目

cd 项目名

如:cd vue_project

(二)安装项目依赖

npm install

注:运行完上面的命令后,项目文件夹中会多出一个package-lock.json文件

================>>>>>>>>

(三)安装vue路由模块vue-router和网络请求模块vue-resource

npm install vue-router vue-resource --save

注:安装完成后,项目文件夹中会多出一个node_modules文件夹,这里面就是我们项目所需要的依赖包资源

================>>>>>>>>

(四)启动项目

npm run dev

当然,之后再要运行该项目时,直接cd到该项目的目录下,运行npm run dev命令就行。

【参考1】https://nodejs.org/en/

【参考2】https://www.cnblogs.com/pengjunhao/p/6762141.html

【参考3】https://www.jianshu.com/p/918314e9f757

原文地址:https://www.cnblogs.com/cchHers/p/10900191.html

时间: 2024-08-23 23:58:36

Vue.js项目的开发环境搭建与运行的相关文章

vue.js初级教程--02.环境搭建

node.js 如何安装 官方网址  https://nodejs.org/en/ 如何验证node.js安装成功 node -v 能够解决什么问题 相较于其他服务器框架,它给系统性能能提升所带来的好处? node.js特性 javascript运行环境 依赖Chrome v8引擎进行代码解释 事件驱动 非阻塞I/O 轻量/可伸缩的 实时交互的应用面比较广(I/O密集型的服务器模型里面性能比较好) 单进程.单线程 解决的问题 并发连接数 案例 利用node.js http模块 我们监听端口888

MAC 下node.js初体验 开发环境搭建

1.安装Xcode https://developer.apple.com/xcode/ 搜索官网下载并安装Xcode. 2.安装Homebrew 安装homebrew是为了便于安装后续需要的程序软件 a.进入主页https://brew.sh/index_zh-cn.html b.复制homebrew主页的安装代码到终端中进行安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/

spark IDEA开发环境搭建及运行问题

下图是例子: 还用说么,引入相关jar包(等下再一一说明)  包括scala,spark-assembly-1.4.1-hadoop2.5.0-cdh5.2.1.jar(按照你的spark和hadoop版本),还有在spark的lib下datanucleus的jar,mysql的数据源连接,这都是必须的~ 运行如果出现如下错误,说明scala版本较高,spark还不能完全支持最新的scala2.11版本,所以降低到scala-sdk-2.10.3 如下图的错误,是因为声明hivecontext时

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

vue.js在windows本地下搭建环境和创建项目

Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的

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

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

Windows 环境下vue+webpack前端开发环境搭建

一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令 3.接着安装全局的vue-cli脚手架,用于帮助你快速搭建所需的Vue的开发模板框架 $ cnpm install -g vue-cli 回车,等待安装, 安装完成后

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

Hive项目开发环境搭建(Eclipse\MyEclipse + Maven)

写在前面的话 可详细参考,一定得去看 HBase 开发环境搭建(Eclipse\MyEclipse + Maven) Zookeeper项目开发环境搭建(Eclipse\MyEclipse + Maven) 我这里,相信,能看此博客的朋友,想必是有一定基础的了.我前期写了大量的基础性博文.可以去补下基础. 步骤一:File  ->  New  -> Project   ->  Maven Project 步骤二:自行设置,待会创建的myHBase工程,放在哪个目录下. 步骤三: 步骤四: