关于vue的创建

本文详述了如何从零开始创建一个Vue项目,包括安装node.js、设置npm源、使用vue-cli创建项目。接着,介绍了vue-router的导入、定义、引入和使用方法,针对vue2.0和vue3.0的区别进行了说明。然后,文章讲解了vuex的状态管理模式,包括向项目中加入Vuex模块、配置store、在main.js中挂载以及在vue页面中使用的方法。最后,提供了在vue页面中读写vuex状态的示例代码。
摘要由CSDN通过智能技术生成

声明:本文章都是由我的老师纯手工打造,我只是个搬运工,因为我不知道老师的博客,,点的是原创。。。。(惭愧

 

如何创建一个vue项目:

  1. 安装node.js
  1. 设置npm的registry(默认的下载地址是国外的太慢,用这个命令注册成国内镜像服务器)

npm config set registry https://registry.npm.taobao.org

npm info underscore (如果上面配置正确这个命令会有字符串response)

  1. 安装webpack

npm install webpack -g

  1. 全局安装vue-cli (vue项目脚手架)

npm install -g vue-cli

  1. 用vue脚手架创建一个vue项目

vue init webpack my-project (项目名)

运行会问你很多问题,第1个选 Y ,其它的都选 N ,最后一个选 NPM。运行完

cd my-project (进入项目文件夹)

npm install

npm run dev (运行项目,默认端口号是8080,在浏览器上访问http://localhost:8080,出现vue默认页面,即安装成功。ctrl+C 关闭服务)

  1. 安装项目运行环境

npm install --save axios (用于向后端服务器发送ajax请求)

npm install element-ui -S (前端UI,可根据需要选择其它UI)

npm install vue-router -S (路由,用于页面跳转)

npm install vuex --save (专为 Vue.js 应用程序开发的状态管理模式,太他妈扯了!简单说用于跨页面传送数据)

好了,至此前端项目搭建完毕,可以把它拖到hBuilderX里,进行前端项目开发了。

vue-router:

Vue-router 即vue项目中运用的路由器,说白了就是用来在vue项目中做页面跳转的。它可以让我们在项目中进行主页面的跳转或局部页面内容的跳转。

vue-router要在vue项目中正常使用要先导入,再定义,再引入,最后是使用

一、导入

可使用vue项目的脚手架,手动设置项,进行vue-router的导入。

注:vue2.0,和vue3.0所使用的vue-router不一样。

二、定义

在src文件夹下新建一个router的文件夹

新建一个index.js文件

vue2.0:

import Vue from 'vue'

import Router from 'vue-router'

const originalPush = Router.prototype.push<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值