Vue.js系列之项目搭建(1)

说明：

我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。

今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版，因为是第一次使用vue，而且一开始使用的时候2.0出来一个月不到，很多坑都是自己去踩的，现在项目要上线了，所以记录一些过程。
（这是首页目前的效果图）

项目搭建具体步骤如下：

1.安装node

到官网下载安装，我这里是win7系统。

（中）https://nodejs.org/zh-cn/

（英）https://nodejs.org/en/

2.安装cnpm镜像

（node自带安装了npm，故不再安装）

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

安装模块时安装方法

$ cnpm install [name]

3.快速学习Vue2.0教程

（中）http://cn.vuejs.org/

（英）https://vuejs.org/

你要是觉得这些网站访问速度都比较慢的话可以移步国内开发者自己翻译的网站：https://vuefe.cn/

4.安装Vue2.0

$ cnpm install vue

5.安装vue-cli 脚手架工具

$ cnpm install --global vue-cli

6.在某个目录下，创建一个基于 webpack 模板的新项目

$ vue init webpack my-project
//my-project是你的项目名

7.安装依赖

$ cd my-project  //到项目目录下
$ cnpm install  //安装依赖

8.运行新创建的vue项目

$ npm run dev

运行之后会看到vue的初始页面效果，如下图，说明你就成功搭建了一个vue项目。（下面框出来的是官方提供的插件和awesome，很实用）

注意事项：

1.安装Git(可选)

如果你熟悉或者想要学习了解Git，可以在安装node之前先安装Git，使用Git Bash代替windows的cmd命令面板。如果你用windows的cmd命令行工具，则以上安装命令前的“$”省略。

Git官网：https://git-scm.com/

Git国内教程推荐：http://t.cn/zQ6LFwE

2.不应用ESLint

创建webpack模板项目时，如果你对ES6和ESLint不是很熟的话我个人不建议你应用它，因为要求比较严格，所以一不小心就报错，导致整个项目运行不起来，对于初学很痛苦。

总结

今天主要分享了一下从无到有创建一个vue项目，接下来我会通过自己的实际项目操作过程，分享我们是如何完成的。

赞 (0)

相关推荐

  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    手脚架是什么? 众所周知,现在的前端项目发展得越渐越大,我们前端程序员要从0开始去搭建一套完整的项目很费时,所以这时候前端工程的手脚架就出现了. 我用得vue-cli也是其中之一,还有其他的我也说不清,我就说一下我接触比较多的这款vue-cli, 但是所有手脚架的核心:都是为了能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效. 然后, vue-cli 的脚手架项目模板有browserify 和 webpack ,vue-lic这个手脚架是把预定义的

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • Vue.js系列之项目搭建(1)

    Vue.js系列之项目搭建(1)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩

  • Vue.js系列之项目结构说明(2)

    Vue.js系列之项目结构说明(2)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是v

  • Vue.js系列之vue-router(上)(3)

    Vue.js系列之vue-router(上)(3)

    说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 2.Vue.js系列之项目结构说明(2) 概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较

  • vue.js系列中的vue-fontawesome使用

    折腾前言 目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-awesome锲而不舍,通过 github 了解到早有大牛搞出了 vue-awesome,因此就开始折腾了-- 废话不多说,开搞! 准备工作 这个是作者的 github 地址:飞机 为了演示完整步骤,用脚手架新建个项目 正在创建中- 趁此闲话几句 这种方式使用有个好处就是,你可以自己自定义任何图标

  • 手把手教你使用Django + Vue.js 快速构建项目

    手把手教你使用Django + Vue.js 快速构建项目

    目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言 本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目 创建完成后,目录结构如下所示 使用 Navicat 工具创建数据库 DjangoVu

  • vue.js从安装到搭建过程详解

    vue.js从安装到搭建过程详解

    最初的时候用vue是直接下载相关文件 按照以前的方法来操作的 后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程: 安装 1. 安装nodejs 直接网上找下载就好 2.安装淘宝镜像 打开命令行 输入 npm install -g cnpm --registry= https://registry.npm.taobao.org 3.安装webpack cnpm install webpack -g 4.在你想要新建项目的路径下新建文件夹 用于存放项目文件 cd 进入你

  • Vue.js开发环境快速搭建教程

    Vue.js开发环境快速搭建教程

    Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装

  • vue.js实例todoList项目

    新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list

  • 用Go+Vue.js快速搭建一个Web应用(初级demo)

    用Go+Vue.js快速搭建一个Web应用(初级demo)

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开发环境: 2. 安装node.js以及npm环境: Gin的使用: 为了快速搭建后端应用,采用了Gin作为Web框架.Gin是用Golang实现的一种Web框架,api非常友好,且拥有出色的路由性能和详细的错误提示,如果你想快速开发一个高性能的生产环境,Gin是一个不错的选择. 下载和安装Gin:

  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用

随机推荐