vue 入门

idea、webstorm、vsCode，都可以开发吧，脚手架vue-cli项目框架一搭建，就写代码了

 

-- 关于vue需要掌握的知识点---

 

使用的开发工具是webstorm，它是默认就安装好了vuejs插件，idea要使用的话，需要安装一下该插件

 

一、快速搭建项目vue-cli 脚手架（Vue2.0）

1、Vue CLI使用前提 –Node、 Webpack

(1) 安装 nodejs并通过npm 安装 cnpm：

https://www.cnblogs.com/shan333/p/15726428.html

(2) 安装webpack（全局安装）：

# 不写版本号，默认是安装最新的版本号
cnpm install webpack@3.6.0 -g   或    npm install webpack@3.6.0 -g

(3) 安装vue脚手架（vue-cli 版本是3.xx）：

# 不写版本号，默认是安装最新的版本号
cnpm install @vue/cli -g        或    npm install @vue/cli -g

● 通过拉取模板就可以使用2.x版本(vue-cli2、vue-cli3任你选)：

npm install -g @vue/cli-init 或 cnpm install -g @vue/cli-init

 

■ 本地安装与全局安装区别：

• 本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
• 全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数。

 

2、初始化Vue-cli2项目、Vue-cli3项目：

• 初始化Vue-cli2项目：

vue init webpack my-project

• 初始化Vue-cli3项目：

vue create my-project

runtime-compiler 和 runtime-only的选择：选 runtime-only

 

■ Vue-cli2项目、Vue-cli3项目区别：

仅仅只是vue-cli3会把node_modules 隐藏起来。

开发好项目，上传代码时node_modules 是不用上传上去的，只需要在readme提醒别人通过 npm install 命令即可在目录创建node_modules。

 

3、启动项目：

• 启动项目前先打包，再启动：

# 打包命令
npm run build

• Vue-cli2项目：

npm run dev

• Vue-cli3项目：

npm run serve

二、vue的浏览器调试插件 vue-devtools
像普通插件一样安装到浏览器即可

插槽slot

在vue中看到$:代表使用但是是vue自身的属性或者是挂载到vue上的插件(比如route)的属性，目的是为了和咱自己定义的变量做一个区分

安装插件命令：npm install （若失败，可以使用cnpm install） # npm install --save 插件名#

安装路由

npm install vue-router --save#

安装vuex

npm install vuex --save#

安装element-ui

npm i element-ui -S# npm install#

安装axios

npm install axios --save-dev 的话，

安装到node_modules 目录中，并在devDependencies 节点下添加上依赖，-dev是在开发时需要用的，部署不需要，一般是一些打包压缩工具和一些格式转化工具四、

组件1、什么是组件化Vue的组件化设计思想借鉴了Java的面向对象思想。

Java认为万物皆对象，在Vue中，万物皆组件。也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。要想实现组件化，需要在页面中注册组件。关于注册的方式有两种，分别是全局注册和本地注册。

2、注册全局注册和本地注册区别：全局注册可以在任何Vue根实例里面使用；而本地(局部)注册只能在绑定它的父组件中使用。

一般项目中只有一个Vue根实例(全局注册)，其他组件都是局部注册的。