vue.js在windows本地下搭建环境和创建项目
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的趋势,但是也并不代表jquey就淘汰了,存在即合理,jq应该在以后会有其他领域的价值,这里我就不多说了。
说了这么多,我们还是开始怎么搭建vue.js的环境吧。首先要搭建vue的环境需要借助node.js的npm的包管理器。这个npm我就不详细介绍了,网上自己去百度,反正后面要安装的一系列的依赖或者包都要用到这个。
一、node.js的安装
node.js近几年很火热,开始我以为是一门语言,其实只是一个平台,他封装了chorme v8的引擎,可以直接用js作为服务器端脚本语言。http://nodejs.cn/进去该网站下载最新版本的node,
注意npm版本是3.8以上的就行。后面就是下一步下一步的安装就可以了。安装完成后,wind+r 弹出cmd,输入node -v 和 npm -v 分别查看版本号,代表node.js安装完成。说到这里博主我遇到过问题了。
因为我电脑我安装过appcan-v3.3,这款IDE封装了node.js并且装的时候把node.js的环境变量给配好了,以至于我后来新装的node.js查看版本号都是低版本的。解决方法其实很简单,打开我的电脑查看属性/高级系统设置/环境变量。然后找到"appcan_path"点击编辑,把“F:\set-soft\AppCanStudioPersonalV3.3\HDK\emulator\mas\”全都删除,然后重新查看版本。v3.10.4的npm即可。(也可以设置全局文件夹,直接采用默认的,那node会全都装在根目录下的node_modules,目前里面只有npm就对了,tips:如果你第一次设置了全局文件夹并且卸载了node,那么你后面再重新安装node.js还会有这个设置,我是没管,具体解决方案可以百度)
二、node.js的环境变量的新建。
其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。
1、启动CMD依次执行以下两条命令
npm config set prefix "F:\set-soft\nodejs\node_global"
npm config set cache "F:\set-soft\nodejs\node_cache"
2、设置环境变量:
NODE_PATH = F:\set-soft\Node\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;
这样就可以把后面全局安装的装到global里并且可以直接用命令使用。
三、安装淘宝的npm镜像:
输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。这个其实看个人爱好吧,因为npm在国内下载速度是很慢,所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。
四、安装全局vue-cli脚手架、webpack.
命令输入
1.(npm)cnpm install -g vue-cli //全局安装vue-cli
2.(npm)cnpm install -g webpack //全局安装webpack
(npm)npm install -g webpack-dev-server //安装webpack的本地webserver
安装完成后,vue-cli脚手架其实就已经把vue也装掉了,所以只需输入vue -V 和 webpack -v 等等就可以查看安装成功与否。
五,新建vue.js项目
新建的话,可以在当前系统盘下直接新建,也可以切换盘符,然后在当前的磁盘里新建文件项目
命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)
看到上面的就代表已经完成,然后就去当前的磁盘里找到“my_test”你的项目文件夹,里面使用了脚手架vue-cli的和webpack提供的模板进行了创建。目录结构大概是这样
六、本地安装和运行项目
1.注意前面的盘符是当前的,然后命令cd my_test //进入文件夹
2.回车输入 cnpm install 你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。
3.准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入
cnpm run dev 回车即可
8080就是默认的端口,在浏览器地址栏中输入localhost:8080会发现默认的模块打开了!
(这里博主我又遇到过问题,就是我的8080端口被占用了,解决方法是,cmd命令输入netstat -ano找到8080端口的PID,然后打开“人物管理器”,找到对应的PID,将该进程给关了即可,我的是svn服务端软件给占了。)
最后打开浏览器:127.0.0.1:8080出现下面这个就代表vue.js在本地就创建好了
七、运行别人的vue.js项目domo
可以从github上克隆下来,然后将项目文件夹放到某个盘符下,然后cmd命令 找到该盘符,比如 f:
1. f:\cd domo_vue
2.命令 cnpm(npm) install //在本地安装
3. cnpm(npm) run dev 回车 //在本地的浏览器打开127.0.0.1带上端口号就可以跑起来了。
八、服务器端运行
命令 npm run build
会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。
进入config/index.js
原来的配置的引用路径为
公众号(ZEROFC_DEV)
vue.js在windows本地下搭建环境和创建项目的更多相关文章
- linux环境下搭建环境发布web项目
在公司真是学习了一下项目环境在linux下搭建和发布的过程,这是每个程序员都应该掌握的一个技能,将整理下为以后温习用,也乐于和为掌握这些技能的猿分享: 这里主要分为5部分:1.安装jdk,并配置环境变 ...
- vue搭建环境并创建项目
1.>npm install @vue/cli -g 2.创建项目A a.>vue ui b.在弹出的管理界面创建项目 或 a.npm install -g @vue/cli-init b ...
- Scrapy教程——搭建环境、创建项目、爬取内容、保存文件
1.创建项目 在开始爬取之前,您必须创建一个新的Scrapy项目.进入您打算存储代码的目录中,运行新建命令. 例如,我需要在D:\00Coding\Python\scrapy目录下存放该项目,打开命令 ...
- windows系统下jenkins环境搭建与基本使用
一. windows 系统下搭建jenkins环境 1.1 jenkins环境搭建和构建job流程图 1.2 安装jdk JDK下载地址: http://www.oracle.com/technet ...
- Windows 7下搭建Jmeter测试环境
jmeter配置.安装 一. 工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用,后 ...
- 【并行计算】Windows系统下搭建MPI环境
Windows系统下搭建MPI环境 MPI的全称是Message Passing Interface即标准消息传递界面,可以用于并行计算.MPI的具体实现一般采用MPICH.下面介绍如何在Window ...
- Windows 7下 搭建 基于 ssh 的sftp 服务器
Windows xp 下 搭建 基于 ssh 的sftp 服务器,服务器端可以用 freesshd,F-secure server等,filezilla server不可用,之前傻乎乎的用file ...
- Windows操作系统下搭建Git服务器和客户端。
本文将介绍如何在Windows操作系统下搭建Git服务器和客户端.服务器端采用的是Bonobo Git Server,一款用ASP.NET MVC开发的Git源代码管理工具,界面简洁,基于Web方式配 ...
- vue.js学习之 打包为生产环境后,页面为白色
vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...
随机推荐
- Java 根据两个经纬度坐标计算距离
public class Distance{ private static final double EARTH_RADIUS = 6378137; private static double ...
- 如何使用ArcGIS Online的地图数据作为底图
1.添加数据-GIS服务器 2.选择添加ArcGIS Server 3.使用GIS服务,下一步 4.输入url为http://cache1.arcgisonline.cn/ArcGIS/service ...
- jquery点击元素之外触发事件
$("#errorMsg_layer").bind("click",function(e){ if($(e.target).closest("#err ...
- XIV Open Cup named after E.V. Pankratiev. GP of SPb
A. Bracket Expression 直接按题意模拟即可. 时间复杂度$O(n)$. #include<stdio.h> #include<algorithm> #inc ...
- [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)
网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketc ...
- Python for Infomatics 第13章 网页服务一(译)
注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 一旦利用程序通过HTTP协议获得 ...
- Glyphicon 字体图标
Bootstrap中的Glyphicon 字体图标 在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效 ...
- 使用TouchScript做2D按钮实现长按功能
导入TouchScript 下载地址:https://www.assetstore.unity3d.com/#/content/7394 把TouchScript和Touch Debugger两个预设 ...
- HDU 5965 枚举模拟 + dp(?)
ccpc合肥站的重现...一看就觉得是dp 然后强行搞出来一个转移方程 即 根据第i-1列的需求和i-1 i-2列的枚举摆放 可以得出i列摆放的种类..加了n多if语句...最后感觉怎么都能过了..然 ...
- DataStructure 排序 源码实现
本篇博客实现了 1.冒泡排序 2.冒泡排序的一种优化(当某次冒泡没有进行交换时,退出循环) 3.选择排序 4.归并排序 5.快速排序. 主要是源码的实现,并将自己在敲的过程中所遇到的一些问题记录下来. ...