我的第一个vue项目

作为一个研一的学生,一开始对vue框架这个概念也仅限于听说过。正打算在研一下半学期学习了解一下vue框架,正巧在此时实验室接手了一个全新的项目,于是我就全身心投入到了vue的研究中。下面是我总结的一些我的第一个vue项目的过程、问题等等。

首先要先搭建一下vue运行环境:

1.下载node.js  (http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖,在cmd里直接输入:npm install -g cnpm

3.安装webpack,在cmd里直接输入:  cnpm install webpack -g

4.安装vue脚手架,在cmd里直接输入: npm install vue-cli -g

5. 在硬盘上找到一个文件夹方工程用,在终端中进入该目录
     cd 文件目录
  7. 初始化一个vue项目,在cmd里直接输入:vue init webpack 工程名字<工程名字不能用中文>

8. 安装项目依赖,在cmd里直接输入:npm install

9. 安装路由模块vue-router和网络请求模块vue-resource,在cmd里直接输入:cnpm install vue-router vue-resource --save

10. 启动项目,在cmd里直接输入:npm run dev

到此,就完成了vue环境的搭建,我在设计项目的时候用的是webstorm集成环境,它算是idea的一个子系统,但是在使用vue框架的时候,idea兼容不是很好,总是会出现红色的错误提示,如果有强迫症的朋友最好用webstorm来进行开发。

环境搭建好了之后,我在网上找了许多的样式模板,借鉴其中的一些样式设计。确定了设计的样式布局后,我开始了我的第一个vue项目。 我查阅许多网上的资料,发现好多人都说vue.js官方网站介绍的很详尽,但是对于一个什么都不懂的小白,看这些资料也是很费脑子,有些也是理解不了的。而且开发时间有限,我也只能硬着头皮就这么边查资料边实现功能。在整个开发过程中我用到了一个组件:(http://element.eleme.io/#/zh-CN/component/tooltip  vue组件网站),这个组件帮我很好的实现了很多功能。

我开始设计目录文档,将我需要的页面按功能划分模块进行设计。设计完目录,将每个页面的路径配置在路由管理文件中。在设计项目的时候遇到了很多问题,有些我也记不清发生的顺序了,所以以下的陈述就根据具体问题划分。

问题:

待更新。。。。。。

时间: 2024-10-12 20:38:09

我的第一个vue项目的相关文章

创建一个Vue项目

Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript5特性. 在用Vue.js构建大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器配合使用.Vue.js也提供配套工具来开发单文件组件. vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可以进入cmd编辑器,输入node -v进行查看.node尽量要用一些新的版本,否则后续安装会提示node版本过低.去node官网下个新版node

一、vue:如何新建一个vue项目

比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须是3.0.0以上 2.python 2.7.* 3.安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 4.cnpm i cooking-cli -g //npm install -g vue-cli 5. co

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

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

VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分钟的时间就可以运行起来并带有热重载.保存时 lint 校验,以及生产环境可用的构建版本.更多详情可查阅 Vue CLI 的文档. 个人理解:在实际开发中都是通过脚手架快速搭建一个vue项目,当然也可以使用CDN的方式(具体请看官网) 使用脚手架的好处: 1. 脚手架是通过webpack搭建的开发环境

完整搭建一个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项目(完整步骤)

参考资料 一.安装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

node创建一个Vue项目

vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢?进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续安装

用wackpack初始化一个vue项目的目录讲解

1.初始化:我在F:\vue+node商城demo\vue+express+node+wackpack目录中初始化一个imoocdemo项目: 之后,进入 imoocdemo 文件夹输入npm install安装依赖的包: 完成后,目录如下: 我在vscode打开后如下:

使用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之