vue.js学习笔记

1.Vue的介绍

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.Vue的安装方式

重点参考

https://blog.csdn.net/u011342720/article/details/81267908?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

https://www.jianshu.com/p/9c1d4f8ed068

1.独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

3.NPM 方法

首先介绍下npm的概念

包管理工具?

  在开发过程中使用jquery,那么是不是要引入jquery,你可能会下载这个jquery.js文件, 然后在代码中<script src="jquery.js"></script>是吧;

 如果使用 npm  ,那么就方便了,直接在npm下使用命令:$ npm install jquery;就自动下载了;在远端有一个npm服务器,里面有很多别人写的代码,我们可以直接使用npm下载使用;

 同时你也可以把自己写的代码推送到npm 服务器,让别人使用;类似于java里面的maven管理工具,npm服务器就类似于中央仓库。

3.windows下面安装vue.js

先下载Node.js,网站https://nodejs.org/en/

推荐下载左侧的稳定版

 第二步:

node.js安装,运行下载后的.msi文件,一路下一步就可以了,安装之后运行cmd,执行node -v 和 npm -v命令

如果看到下面的提示,则显示安装成功

 2.配置npm的全局模块的存放路径以及cache的路径,我选择的路径使Node.js的安装路径,在此路径下建两个文件夹node_global 和 node_cache,现在的文件目录如下

 执行如下命令

npm config set prefix "C:Program Files odejs ode_global"

npm config set cache "C:Program Files odejs ode_cache"

安装cnpm

说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装“中国的npm”——cnpm

参考网址如下:http://npm.taobao.org/

安装命令为:

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

 首先进入目录

 win10系统需要按Win+X,再按A才有权限这里不建议安装再C盘的program 

 

设置环境变量

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

1、鼠标右键”此电脑”,选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。 
修改用户变量PATH:

选中PATH,点击编辑,在已有的变量后面,加入英文的”;”,然后把“C: odejs ode_global
新增系统变量NODE_PATH:

在下面的系统变量中点击新建,弹出下框,把变量值设置成“C: odejs ode_global ode_modules”

 

用cnpm安装vue

cnpm install vue -g

 

安装vue命令行工具

cnpm install vue-cli -g

创建工程

用cd命令来到你将要新建工程的目录,如“C:vueproject”

vue init webpack myproject

3、定位到C:vueprojectmyproject的工程目录下

cd C:vueprojectmyproject

4、安装该工程依赖的模块,这些模块将被安装在:mytest ode_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules

cnpm install

5、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

cnpm run dev 

参考博客如下

https://blog.csdn.net/traguezw/article/details/54577560

https://blog.csdn.net/haoxuexiaolang/article/details/79294862

https://blog.csdn.net/yangxiaodong88/article/details/79930274

原文地址:https://www.cnblogs.com/edison20161121/p/9125930.html