文档章节

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

北桥苏
 北桥苏
发布于 2016/12/26 18:08
字数 1696
阅读 311
收藏 7

    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     //进入文件夹

..回车输入  cnpm install   你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

3.4.准备工作做好以后,测试一下项目里面默认的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:

f:\cd domo_vue

命令 cnpm(npm) install    //在本地安装

最后  cnpm(npm) run dev   回车   //在本地的浏览器打开127.0.0.1带上端口号就可以跑起来了。

 

八、服务器端运行

 npm run build   

会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。

进入config/index.js

原来的配置的引用路径为

 

整个vue.js项目就可搭建完成。

 

© 著作权归作者所有

北桥苏
粉丝 9
博文 113
码字总数 73609
作品 0
深圳
程序员
私信 提问
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
2018/05/22
238
0
electron-vue模仿网易云桌面应用体验

简介 像官网说的那样,electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样,只是如果有特殊的需求需要修改应用的话就要用到electron相关的api...

皆随你
2018/11/03
0
0
使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化
2018/06/24
185
0
Vue-CLI 3.x 自动部署项目至服务器

前言 平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 ...

nxmin
04/01
0
0
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

韦姣敏
2018/06/23
233
1

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习之模块

1、 stub_status模块: 用于展示nginx处理连接时的状态。 配置语法如下: Syntax:stub_status;Default:默认没有配置Context:server、location 可以编辑default.conf,加上如下配置: ...

码农实战
48分钟前
4
0
MySQL,必须掌握的6个知识点

目录 一、索引B+ Tree 原理 MySQL 索引 索引优化 索引的优点 索引的使用条件 二、查询性能优化使用 Explain 进行分析 优化数据访问 重构查询方式 三、存储引擎InnoDB MyISAM 比较 四、数据类...

李红欧巴
52分钟前
4
0
堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
今天
4
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
今天
6
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部