idea、webstorm、vsCode,都可以开发吧,脚手架vue-cli项目框架一搭建,就写代码了
-- 关于vue需要掌握的知识点---
使用的开发工具是webstorm,它是默认就安装好了vuejs插件,idea要使用的话,需要安装一下该插件
一、快速搭建项目vue-cli 脚手架(Vue2.0)
1、Vue CLI使用前提 –Node、 Webpack
(1) 安装 nodejs并通过npm 安装 cnpm:
(2) 安装webpack(全局安装):
# 不写版本号,默认是安装最新的版本号
cnpm install [email protected] -g 或 npm install [email protected] -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根实例(全局注册),其他组件都是局部注册的。
因为相信,所以看见.