nodejs+webpack+vue以及npm安装对应的库
vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue-cli是vue官方提供的一个命令行工具,vue-cli主要是用于构建单页应用的脚手架。
使用方法:
安装node.js,同时npm也会一同安装,分别执行node -v;npm -v 查看安装版本,安装完成之后执行npm list -global;会
看到npm路径并不是自己的安装目录xxx/nodejs/ 下,而是:
这是因为npm 默认本地的仓库是user/Appdata/Roaming/下面,需要分别执行指令copy并修改本地仓库,(假如安装D:/nodejs)
npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"
再次执行npm list -global 便可看到修改后的仓库配置。输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站,npm config get registry可以测试镜像站点,查看仓库配置文件 user/.npmrc
npm config list可以查看
修改完prefix,cache之后需要重新安装npm 执行npm install npm -g 此时npm 会安装在node_global/node_modules下面
还需要将node_global/node_modules加入到环境变量中才可执行npm, 但是还有一个问题就是git bash here 找不到npm
此时必须将机器重启,然后接着才能安装vue等工具
然后使用npm安装vue以及脚手架vue-cli,npm install 这样安装目录就是在D:/nodejs/mode_global/node_modules目录下
并把D:/nodejs/mode_global添加到环境变量path中vue指令便可查阅。
1、安装vue-cli:npm install -g vue-cli
2、安装webpack-simple模板:vue init webpack-simple 项目名称(你要创建的项目名称),如: vue init webpack-simple demo
3、安装项目依赖:npm install
4、执行代码:执行webpack命令,在dist目录下生成build.js文件,执行npm run dev命令,自动启动web服务127.0.0.1:8080
本项目则是基于vue-cli生成的单页应用进行改造成多页面模板。
本项目用到了两个html模板页:index.html、users.html,因此,在webpack.config.js文件里entry节点则有两个入口文件/src/index.js、/src/user.js。
index.html模板,<router-view>把路由匹配到的组件渲染在这里
<body><div id="app"><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div><script src="/dist/build.index.js"></script>
</body>
index.js入口文件,引入了logon.vue组件,在'/'目录下默认引入该组件。
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Login from './components/login.vue'
require('./scss/reset.scss')
require('./scss/layout.scss')Vue.use(VueResource)
Vue.use(VueRouter)const router= new VueRouter({ routes:[{path:'/',component:Login}]
});new Vue({router,el:'#app'
});
users.html模板,使用 router-link 组件来导航,通过传入 `to` 属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签,<router-view>,<router-view>把路由匹配到的组件渲染在这里
<body>
<div id="app"><ul id="nav" class="clearfix"> <li><router-link to="/index">首页</router-link></li> <li><router-link to="/userList">报名人员</router-link></li></ul> <div id="banner"></div> <router-view></router-view>
</div>
<script src="/dist/build.index.js"></script>
</body>
user.js入口文件,引入了index.vue和userList.vue两个组件,在'/'及'/index'目录下默认引入index.vue组件,在'/userList'目录下默认引入userList.vue组件。
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Index from './components/index.vue'
import UserList from './components/userList.vue'
require('./scss/reset.scss')
require('./scss/user.scss')Vue.use(VueResource)
Vue.use(VueRouter)const router= new VueRouter({ routes:[{path:'/',component:Index},{path:'/index',component:Index},{path:'/userList',component:UserList}]
});new Vue({router,el:'#app'
});
每个组件下都有各自的js页面效果及数据请求,如:login.vue
<template><div class="login-box"><div><p><input type="text" placeholder="手机号" v-model.trim="phone"/><input type="text" placeholder="验证码" v-model="code" readonly="readonly"/> </p><input type="button" value="发送验证码" @click="getCode"/></div><button id="login-btn" @click="loginUser">登 录</button> </div>
</template><script>
import {hex_md5} from '../util/md5'
import httpHelper from "../util/httpHelper"
import {setTelPhone} from '../util/cacheManger'export default { data () {return {phone: '15365655565',code:'' }},methods:{getCode(){let _self = this;let tel = /^[0-9]{11}$/.test(_self.phone)if(!tel){_self.phone = '手机号不正确'; return;}if(_self.phone){let params = {num:_self.phone} httpHelper.get(_self,"getVeryCode",params,(data)=>{if(data.body.code<0){alert(data.body.description);return; }_self.code = data.body.data; },(err)=>{alert("shi bai")})} },loginUser(){let _self = this;if(_self.phone && _self.code){ setTelPhone(_self.phone); window.location.href = '/users.html'; }}}
}
</script>
安装对应的css和ui框架:
npm uninstall element-ui 卸载
安装对应的版本:npm install element-ui@2.0.0 -S
npm install fontawesome # 图标字体库
fontawesome官网:http://fontawesome.dashgame.com/
nodejs+webpack+vue以及npm安装对应的库相关推荐
- 当在 终端 中用 npm 安装 Vant 组件库时,发生“npm ERR code ERESOLVE ;npm ERRERESOLVE could not resolve;”报错时,该怎么办?
出现的问题: 当在 终端 中用 npm 安装 Vant 组件库时,发生 npm ERR! code ERESOLVE: npm ERR! ERESOLVE could not resolve:报错时, ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- npm安装、使用方法
文章目录 npm安装.使用方法 1.npm介绍 2.npm查看版本 3.npm查看所有命令列表 4.npm查看所有命令用法 5.npm查看配置 6.npm永久换源 7.npm查看换源是否成功 8.np ...
- Html第1集:WebStorm 安装、vue3.0 安装、npm安装
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/126379205 本文出自[赵彦军的博客] 文章目录 WebStorm vue3.0 ...
- 安装nvm nodejs npm webpack vue vue-cli
nvm: https://github.com/coreybutler/nvm-windows/releases 选择,下载解压安装 cmd中设置淘宝镜像,加快下载nodejs速度 nvm node_ ...
- vue开发搭建(npm安装 + vue脚手架安装)
一.概念 1.npm: Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...
- npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
- npm安装教程 集成npm webpack vue-cli
一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...
- npm安装vue_零基础入门vue开发
上面一节我们已经成功的安装了nodejs,并且配置了npm的全局环境变量,那么这一节我们就来正式的安装vue-cli,然后在webstorm开发者工具里运行我们的vue项目. 这一节有两种创建vue项 ...
最新文章
- SpringCloud之分布式配置中心(六)
- ssl1333-地鼠的困境【二分图,最大匹配,图论】
- Just do IT --- gulp
- DBMS_SQL使用
- 首席架构师眼中的架构应该是怎样的?
- c#中的线程Thread
- linux查询语言,Linux结构化查询语言SQL——SQL的分类和DDL使用
- RatingBar的实现
- python爬取别人qq空间相册_Python网络爬虫5 - 爬取QQ空间相册
- 学计算机cpu重要还是显卡重要,电脑玩游戏CPU重要还是显卡更重要?
- P2141 [NOIP2014 普及组] 珠心算测验
- Ubuntu 20.04安装字体
- Android自定义View_绘制菱形图片
- linux下安装mysql问题:mysqld_safe mysqld from pid file /usr/local/mysql/data/mysql.pid ended
- 音频信号输入itc服务器,ITC公共广播系统
- BIOS设置u盘启动找不到u盘选项怎么办?
- 二次解析源码全kyuan
- 西南石油大学计算机考研人数,8所高校报考人数汇总,21考研这是要妥妥突破400万人的节奏?...
- 文华、博易和金字塔K线图上分时均价线及不同时间起点调整
- ASEMI整流二极管1N4007参数,1N4007规格,1N4007厂家
热门文章
- django-oscar相关的模块调研信息汇总
- FastDFS安装笔记和使用
- linux查看新挂上的磁盘
- java.lang.NoClassDefFoundError: scala/xml/MetaData
- win7修改系统字体时需要修改的项目
- java jsf table_JSF数据表(h:dataTable)排序数据
- mysql中的extract()函数
- myeclipse去除jsp校验错误
- SQL优化之列裁剪和投影消除
- Slide:配置Oracle 10g双向流复制