首页 > 其他分享 >vue 入门

vue 入门

时间:2022-10-07 11:34:43浏览次数:77  
标签:npm Vue 入门 项目 vue install 安装


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根实例(全局注册),其他组件都是局部注册的。

因为相信,所以看见.



标签:npm,Vue,入门,项目,vue,install,安装
From: https://blog.51cto.com/u_15300825/5734340

相关文章

  • vue 2 坑编译系统
    errorin./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true&SyntaxError:TypeError:Cannotsetproperty'paren......
  • 【Vue3.x】自定义指令directive
    自定义指令directive不同于vue2指令bindinsertedupdatecomponentUpdatedunbind1.vue3指令中的钩子函数created元素初始化的时候beforeMount指令绑定到元素后......
  • 小心深度学习这个“坑”(入门误区详细版)
    定位:深层学习在哪1、深层学习需要什么?数学线性代数:是有关任意维度空间下事物状态和状态变化的规则。概   率:是用来衡量我们对事物在跨时间后不同状态的确信度。编程......
  • drf从入门到精通
    前后端开发模式API接口、接口测试工具postman、restful规范、序列化与反序列化、djangorestframework快速使用rest-framework之APIView基本使用及源码分析、Request类源......
  • 改造vue-webtopo-svgeditor2.1版本,兼容vue2
    原控件在 https://github.com/yaolunmao/vue-webtopo-svgeditor 是园子里的朋友 咬轮猫  开发的在网上发现大神开发这套组态,很符合项目要求,10.1期间准备融入项目,结......
  • Vue3使用可重复使用的Mixins
     这里有两个子页面是重复功能的,一个是点击事件,一个是鼠标移入事件点击事件  鼠标移入事件  效果      现在使用mixins新键一个文件夹minxs,再......
  • Node.js原生开发基础入门
     1.NodeJS编程基础概要2.本地环境搭建与基础入门3.文件操作与模块化概念4.JavaScript模块化开发5.npm包管理       1.NodeJS编程基础概要node.js与J......
  • Vue脚手架创建
    1、安装脚手架的包npminstall-g@vue/cli,通过vue--version检查版本检查版本2、切换到创建项目的目录,然后使用命令创建项目vuecreatexxx3、项目配置 eslint:语法检......
  • JSP——简介-快速入门
    JSP简介    JSP快速入门    <%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>Title</title></head><bod......
  • [转]VUE 之 Webpack 打包构建
    首先,下载jquery npmijquery-S然后,下载webpack npmiwebpackwebpack-cli-D接下来,创建文件:webpack.config.jsmodule.exports={mode:'developmen......