Vue是近两年来比较火的一个前端框架(渐进式框架吧)。 Vue两大核心思想:组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用;数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可。本文用Vue-cli从零开始搭建一个Vue项目。

准备工作

1、下载安装Node.js

  下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可。

  具体怎么安装Node.js就不用具体说明了,安装Node.js会默认安装npm(包管理工具)。

2、启用cmd

  按下Windows+R,在打开的“运行”程序窗口,输入“cmd”,并按下回车键,即可打开系统自带的命令提示符。

3、安装cnpm

  npm是Node.js提供的包管理工具,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,我们可以用淘宝 npm 镜像cnpm代替默认的 npm。

  方法一:使用npm安装cnpm

 npm install -g cnpm --registry=<a href="https://registry.npm.taobao.org" _src="https://registry.npm.taobao.org">https://registry.npm.taobao.org</a>

  注:这样可能会导致npm和cnpm版本可能不一样。

  方法二:用alias 命令设置别名

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

  输入cnpm -v查看cnpm版本,来检查cnpm是否正确安装。如未正常安装请检查系统变量path是否配置正确(不是本文重点,此处不再赘述)。

4、安装vue-cli

  使用cnpm全局安装vue-cli,在cmd中输入一下命令(注:“-g”这个参数意思是全局安装)

cnpm install –g vue-cli

正式动手

  准备工作做好之后,开始正式初始化项目。选择webpack作为打包工具,项目名是mydemo,然后按照提示填写一些配置。这些配置最终会安装相应的模块并且写到项目的package.json中。

1、新建项目mydemo

vue init webpack mydemo

  mydemo是项目名称,这个名字自己随便取(不能有大写字母)。命令输入后,会进入安装阶段,需要用户输入一些信息。

信息详情:

----------------------------------------------------------------------------------------------------------------------------

Project name (vuetest)

项目名称,可以自己指定,也可直接回车,按照括号中默认名字。

Project description (A Vue.js project)

项目描述,也可直接点击回车,使用默认名字。

Author

作者,可以自己指定,也可直接回车。

接下来会让用户选择

Runtime + Compiler: recommended for most users

运行加编译,既然已经说了推荐,就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

仅运行时,已经有推荐了就选择第一个了

Install vue-router? (Y/n)

是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n)

是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行。

Setup unit tests with Karma + Mocha? (Y/n)

是否安装单元测试。

Setup e2e tests with Nightwatch(Y/n)?

是否安装e2e测试。

----------------------------------------------------------------------------------------------------------------------------

用编辑器打开项目,目录结构大致是这样的。

目录介绍:

----------------------------------------------------------------------------------------------------------------------------

bulid

里面是一些操作文件,使用npm run *    时其实执行的就是这里的文件。

config

配置文件,执行文件需要的配置信息。

src

资源文件,所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。

assets

资源文件夹,放图片之类的资源,

components

组件文件夹,写的所有组件都放在这个文件夹下,

router

路由文件夹,这个决定了页面的跳转规则,

App.vue

应用组件,所有自己写的组件,都是在这个组件之上运行了。

main.js

webpack入口文件。

----------------------------------------------------------------------------------------------------------------------------
2在mydemo下安装依赖

切换到项目目录

cd mydemo

安装模块

cnpm install

  它根据package.json的配置表进行安装,安装完后会在mydemo下多一个文件夹node_modules,这里的文件对应着package.json里的配置信息。

3、运行mydemo

输入命令

npm run dev 

  在浏览器输入地址http://localhost:8080,看到如下页面,说明大功告成,一个Vue项目已经初始化完成!

感 谢 阅 读~

分享一个公众号-----前端麻辣烫 ,一个专注于前端技术学习与交流的公众号~

微信搜索“WebSnacks”,或者扫描下方二维码。

vue-用Vue-cli从零开始搭建一个Vue项目的更多相关文章

  1. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  2. 从零开始搭建一个vue.js的脚手架

    在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简 ...

  3. 使用Vue脚手架(vue-cli)从零搭建一个vue项目(包含vue项目结构展示)

    注:在搭建项目之前,请先安装一些全局的工具(如:node,vue-cli等) node安装:去node官网(https://nodejs.org/en/)下载并安装node即可,安装node以后就可以 ...

  4. Android 从零开始搭建一个主流项目框架—RxJava2.0+Retrofit2.0+OkHttp

    我这里的网络请求是用的装饰者模式去写的,什么是装饰者模式呢?在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象.我的理解就是一个接口, ...

  5. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  6. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

  7. 完整搭建一个vue项目

    目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...

  8. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  9. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

随机推荐

  1. 第三次web作业

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0 ...

  2. 使用 ISO镜像配置 本地yum 源(RHEL, CentOS, Fedora等适用)

    使用 ISO镜像配置 本地yum 源(RHEL, CentOS, Fedora等适用)   1.上传ISO镜像和挂载 1) 上传Centos7.2 ISO镜像到 /usr/local/src目录 2) ...

  3. html基本标签(慕课网)

    html标签: 1.<q>标签,短文本引用(quote,引用) 注解:引用短文本,比如引用古人的一句话 ,注意引用的文本不需要再加双引号. <q>标签的真正关键点不是它的默认样 ...

  4. android recovery升级过程中掉电处理

    一般在升级过程,都会提示用户,请勿断电,不管是android的STB,TV还是PHONE,或者是其他的终端设备,升级过程,基本上都可以看到“正在升级,请勿断电”,然后有个进度条,显示升级的进度. 但是 ...

  5. mybatis学习系列一(mybatis简介/使用)

    1mybatis简介(1) 1.1工具:jbbc,jdbctemplate 功能简单,sql语句编写在java代码里面,硬编码高耦合的方式 1.2 框架:整体解决方案 1.2.1 Hibernate: ...

  6. 常见问题--post发送参数使用httpservletrequest读取为空

    1)springcloud项目中使用request.getparameter读取参数为空 原因:使用restcontroller导致,之前为controller.而通过requestbody注解封装为 ...

  7. [20171218]varchar2(4000)如何保存.txt

    [20171218]varchar2(4000)如何保存.txt --//以前写的,不知道为什么被删除了,现在补上. 如果一行能被存储于一个数据块(data block)中,那么其行头(row hea ...

  8. MVC model验证 获取验证错误信息

    public static class ModelStateExtensions { /// <summary> /// 获取model验证错误信息 /// </summary> ...

  9. java调用python的惨痛史(无法获取环境变量)

    环境:java,was,python2.6,红帽linux,oracle,python用cx_Oracle        事情是这样的,有个需求,需要对数据库进行处理,简单说就是把数据取出来,用pyt ...

  10. 3.3Python数据处理篇之Numpy系列(三)---数组的索引与切片

    目录 (一)数组的索引与切片 1.说明: 2.实例: (二)多维数组的索引与切片 1.说明: 2.实例: 目录: 1.一维数组的索引与切片 2.多维数组的索引与切片 (一)数组的索引与切片 1.说明: ...