Vue 学习记录（一）

环境准备

node.js　
vue-cli

安装配置环境

1.下载node.js，使用默认配置安装。

2.使用npm命令安装国内下载镜像（可选）

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

　　tips:在命令行输入 npm -v 或cnpm -v 查看npm或cnpm 版本

3.全局安装vue-cli （vue-cli3.x 搭建的项目界面更为简洁，查看vue-cli 3.x 新特性）

　　cmd:　　cnpm(或 npm) install vue-cli -g

　　tips:在命令行输入 vue -V 查看vue-cli版本（注意这里的-V一定要大写的’V‘）

创建项目

1. 创建vue项目

　　(vue-cli v2.x)cmd:　vue init webpack ”项目名称“

　　(vue-cli v3.x)cmd:　vue create ”项目名称“

2.安装依赖

　　cmd:　　cd到项目根目录，执行命令　npm install

3.运行项目

　　(vue-cli v2.x)cmd:　npm run dev 或 npm start

　　(vue-cli v3.x)cmd:　npm run serve

?什么是npm和cnpm

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

cnpm:因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”

扩展阅读：

原文地址：https://www.cnblogs.com/HandsomeBlog/p/11109099.html

时间： 2024-10-11 15:24:57

Vue 学习记录（一）的相关文章

vue学习记录：vue引入，validator验证，数据信息，vuex数据共享

最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <template> </template> <script> </script> <style> </style> 要引入其他vue ,需要 import <template> <div> <Header></

[20190614]webpack+vue学习记录

本文记录一些学习webpack+vue相关的知识点,方便以后查阅,添加或修改 1. 初始化vue项目的代码结构 build--项目依赖包配置信息 config--项目配置文件 dev.env.js--开发环境配置文件 index.js--基础配置文件 prod.env.js--线上环境配置文件 mode_module--依赖包文件 src--项目源码 assets--项目图片资源 components--项目小组件 router--项目路由 App.vue--项目根组件文件 main.js--项

【前端小小白的学习之路】vue学习记录④（路由传参）

通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中我们已经有两个页面(Helloworld.vue&Hello.vue),现在我准备往Hello.vue里面添加3个链接,分别对应两种情况的跳转. 第一步:在原来的Hello.vue里添加路由链接跳转的代码(见第38-44行代码),添加后的Hello.vue代码如下: 1 <template&g

vue学习记录（一）—— vue开发调试神器vue-devtools安装

网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址点击跳转具体步骤: 第一步:找到vue-devtools的github项目,并将其clone到本地 vue-devtools git clone https://github.com/vuejs/vue-devtools.git 第二步:安装项目所需要的npm包(进入vue-devtools编译项目文件目录,很重要

【前端小小白的学习之路】vue学习记录②（hello world！）

接着上篇vue-cli脚手架构建项目结构建好项目之后,就开始写个“hello world!”吧~~~ vue玩的都是组件,所以开发的也是组件. 1.新建helloworld.vue.(删除Hello.vue)代码如下:  <template> <div class="container"> <h1>hello,world!</h1> <p>{{test}}</p> </div

【前端小小白的学习之路】vue学习记录（vue-cli脚手架构建项目结构）

我们直接从vue的工程化开始入手. 在这里用git命令行搭建项目环境.(当然直接cmd命令行下也是一样的) git下载安装地址:https://www.git-scm.com/download/win git使用教程:http://www.cnblogs.com/havenshen/p/3493522.html git常用命令整理:http://www.cnblogs.com/luxiaoxing/p/7545403.html 1.node安装. node下载安装地址:http://nodejs

Vue 学习记录<1>

1.环境搭建:(前提node.js搭建) # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖 $ cd my-project $ npm install $ npm run dev 2.

【前端小小白的学习之路】vue学习记录⑤（组件通信-父与子）

今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之间肯定是有相互关系的,我们就称这种现象叫组件通信. 比如父组件发生了某项改变,子组件会跟着相应发生变化:反过来,子组件有了某种改变,父组件有时也会随之做出调整.那么这种现象我们称之为双向数据流动. 然而,vue的作者敏锐的认识到,双向数据流带来便捷的同时,也存在着极大的安全隐患. 父组件将变化传递给

Vue学习记录-画页面

webstorm 因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它.如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮.怎么办呢? 安装插件(以mac版本为例,window下面应该大同小异) 1. 打开偏好设置,从左边找到Plugins 2. 点击Browse repositories...,然后搜索Vue,进行安装 3. 添加Vue模板 <template> </template> <script> expor