抛开vue-cli 利用requireJS搭建一个vue项目

---恢复内容开始---

现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp install XXX帮我们搭建系统。这边也遇到了这样的情况,记录一下过程,备忘。

采用的方式是利用requireJS搭建一个遵循AMD规则的vue项目。关于这一块,大家可以百度一下,查询相关资料熟悉requireJS的使用。

第一步,都是建立一个如下常规的简单的工程结构:

----lib 存放js库文件

---src主要的编码位置,vue的组件都在这个地方编写

---index.html 整个项目的布局页(相当于asp.net mvc里面的_layout)

---index.js 项目脚本的入口

---require.conf.js 这部分代码我从index.js里面抽出来的,单独成一块,让整个项目显得更有结构,这里的代码是项目的入口。

2.在布局页引入require.js,注意在data-main指定了require执行的入口是require.config.js(requireJS默认解析js,扩展名可以省略)

3.在require.config.js是定制整个项目的依赖。

4.需要引入的vue都引入了,后面就是开始建立在index.js建立实例化vue,后面的都是常规操作

5.在src下面编写组件

6.配置路由,和编写vuex,该项目简单做了一个登陆校验。

该项目包含了vuex和vue-router的基本用法,有兴趣的可以下载代码查看。

Git仓库地址:https://github.com/TurboV/WebWork.git

原文地址:https://www.cnblogs.com/hot-destiny/p/10965140.html

时间: 2024-10-12 21:46:41

抛开vue-cli 利用requireJS搭建一个vue项目的相关文章

vue.js使用vue-cli搭建一个SPA项目

WHY 之所以写这篇如何运用脚手架自动化构建出一个项目的大架构,主要是面向想入门vue的小伙伴.之前,我第一次接触vue,一直摸不着头脑,想在网上搜个接地气的教程都找不到.SO,我以如何搭建结构为开始,向想入门vue的童鞋们把我仅有的力量贡献出来,随后我会持续更新vue如何与ui框架结合使用:在低版本ie如何运用vwjs将其打包为桌面应用以及我在实际开发的过程中踩过的各种坑.欢迎大家观看与互相交流哦. HOW 话不多说,切入主题 1.首先,你的电脑需要nodejs环境,如果没有,点击下面链接去下

完整搭建一个vue项目

目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node -v npm -v 2.为了提高下载效率,可以使用淘宝镜像 # 淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org # 检查是否安装成功 cnpm -v 3.安装webpack打包工具 webpack中文文档 npm

vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可.本文用Vue-cli从零开始搭建一个Vue项目. 准备工作 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可

使用vue-cli脚手架自动化搭建一个vue项目

最近在学习使用vue,简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项: 1.首先,要安装node.js,之后第一步检测是否安装node:没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/ 安装成功后在命令行查看node版本,如果有说明安装成功. 2.之后全局安装vue-cli脚手架 电脑进入cmd,任意路径下 使用 npm命令:npm install vue-cli -g 注意:npm -v 3.0+   npm版本需要在3.0之

如何使用脚手架搭建一个react项目

1.准备工作: 首先要知道,搭建一个react项目总是需要安装node.js和npm的,未安装的请移步node.js官网:https://nodejs.org/en/ 检测是否安装成功:npm -v 和node -v 2.npm安装脚手架 执行命令npm install create-react-app 3.使用npx和脚手架创建项目my_app,这个过程可能需要几分钟,请耐心等待 npx create-react-app my_app 这里用到了npx,就是可以让你不用全局安装create-r

Vue CLI 3.x搭建Vue项目

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1

@vue/cli 3 安装搭建及 webpack 配置

首先卸载旧版1 npm uninstall vue-cli -g //or 2 yarn global remove vue-cli 再次安装 1 npm install -g @vue/cli 2 //or 3 yarn global add @vue/cl 查看版本 vue --version //or vue -V 创建项目vue create  my-project //项目名// Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作.  //你必须通过  

【Vue CLI】从安装到构建项目再到目录结构的说明 𰅨

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.