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 /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命令就行。
【参考2】https://www.cnblogs.com/pengjunhao/p/6762141.html
【参考3】https://www.jianshu.com/p/918314e9f757
Vue.js项目的开发环境搭建与运行的更多相关文章
- vue.js多页面开发环境搭建
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的. ...
- OpenDaylight开发hello-world项目之开发环境搭建
OpenDaylight开发hello-world项目之开发环境搭建 OpenDaylight开发hello-world项目之开发工具安装 OpenDaylight开发hello-world项目之代码 ...
- 零基础 Vue 开发环境搭建 打开运行Vue项目
[相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...
- [Vue音乐项目] 第一节 环境搭建
1.Node安装 登录官网,下载最新版本并安装: 在我的电脑内,执行以下操作:右键->属性->高级->环境变量->系统变量->path 查看是否有node的安装路径,没有 ...
- vue + vue-router+vuex+elementUI开发环境搭建
先在npm中安装vue脚手架, //先安装国内镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装vue cn ...
- vue.js 一(基础环境搭建)
之前由于看了React的东西,写了两篇React的脚手架搭建,一是给自己记一点可用的东西,免得每次都去找,毕竟搭建环境在项目相对固定的时期不是经常要干的事情,一段时间不用就会忘记了. 前端的js框架还 ...
- spark IDEA开发环境搭建及运行问题
下图是例子: 还用说么,引入相关jar包(等下再一一说明) 包括scala,spark-assembly-1.4.1-hadoop2.5.0-cdh5.2.1.jar(按照你的spark和hadoo ...
- Myeclipse下PHP开发环境搭建及运行
外接CSDN链接 http://blog.csdn.net/yuxiangaaaaa/article/details/54948426 这是php初始设置,后面进行重新设置
- 应用一:Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
随机推荐
- 路飞-pip源
pip安装源 介绍 """ 1.采用国内源,加速下载模块的速度 2.常用pip源: -- 豆瓣:https://pypi.douban.com/simple -- 阿里: ...
- GM2引擎脚本召唤宝宝说明
功能: 脚本召唤宝宝. 格式: RECALLMOB 怪物名称 宝宝等级(最高为 7) 叛变时间(分钟) 是否自动变色(0.1)固定颜色(1-7) 攻击力受自动变色颜色不同而不同 固定颜色攻击力 ...
- 谷歌play上APK的下载
https://apkcombo.com/tw-hk/ 在google搜索 APK DOWNLAOD就有专门下载谷歌PLAY的APK的
- web项目获取路径
Java获取路径的各种方法: (1).request.getRealPath("/"); //不推荐使用获取工程的根路径 (2).request.getRealPath(requ ...
- Redis-消息
Redis 发布订阅(实际开发不使用) Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图 ...
- PyCharm安装及汉化设置为中文(附汉化包)
下载:https://www.jetbrains.com/pycharm/download/#section=windows 下载社区版免费 双击运行安装程序 Next 选择安装路径安装 创建桌面快捷 ...
- 一周搞定模拟电路_P5_基本放电电路记录
1.原始基本放大电路 2.改变Rb,Rb由200kΩ变为100kΩ 3 4
- STM32CUBEMX使用操作记录
1.New Project 2.选择芯片型号 3.配置相关外设 4.例如选择了GPIO_Output 5.配置时钟树 灰色框点不了,这和你上一步相关外设配置有关,鼠标靠近灰色框,系统会给出提示 6.工 ...
- java 倒入一篇文章,显示每个字母的出现概率,从大到小排序
package com_1; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; ...
- 原生java与js结合
链接:https://www.jb51.cc/html5/15606.html