一、关于vuejs

这是一个MVVM的前端开发框架,model(数据)、viewmode(通讯)、view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则。

我们都知道一个普通常见的页面,他会由header,body,footer,组成,里面再细分还有nav,list,slidebar等等,组件化就是将这些会重复用到的代码封装起来,在一个页面中需要用到的时候进行引入。

二、搭建脚手架(初始化项目)

做一个项目开始将一些文件环境搭建好,这里vue提供了vue-cli作为项目搭建工具,在nodejs环境下进行安装,nodejs版本在4.0以上

以下是在window环境下的安装步骤

1.node -v 查询版本

2.npm install -g vue-cli 安装vue-cli

3.vue 查看是否安装成功

4.vue list 查看可用模板

5.vue init webpack project-name 选择一个模板(webpack)初始化,注意这里进入到需要项目所在目录,然后根据提示填写作者等内容

6.cd project-name 进入项目文件夹

7.npm insatll 安装依赖,这里是因为在init后文件根目录下有一个package.json文件,这个文件中包含了所需要的包,可以自动安装。在没有这个文件的时候我们需要先init 然后安装所需要的包,package.json会显示安装成功后的包的版本信息

8.npm run dev 启动项目,端口号是8080

vue-cli github地址

【vuejs小项目】一、脚手架搭建工作的更多相关文章

  1. 【vuejs小项目——vuejs2.0版本】单页面搭建

    http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...

  2. 【vuejs小项目——vuejs2.0版本】组件化的开发方式

    对于多张页面需要里存在相同模块,可以进行组建化的开发模式. 例如:此处需要一个评分标准组件,创建一个components/star/star.vue. 在需要引入该组建的页面上 import进去< ...

  3. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  4. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  5. 小tips:使用vue-cli脚手架搭建项目,关于eslint语法检测配置

    配置文件在项目根目录里,文件名以 .eslintrc.* 为名. 为了兼容以前写的代码,避免修改太多代码,把不符合自己习惯的规则去掉,简单配置代码: module.exports = { root: ...

  6. 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...

  7. 使用 vue-cli(脚手架)搭建项目

    一.使用 vue-cli(脚手架)搭建项目 1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 2) 在线文档:https://github.c ...

  8. vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...

  9. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

随机推荐

  1. SQL汉字转拼音函数-支持首字母、全拼

    SQL汉字转拼音函数-支持首字母.全拼 FROM :http://my.oschina.net/ind/blog/191659 作者不详 --方法一sqlserver汉字转拼音首字母 --调用方法 s ...

  2. 关于点击Invalidate Caches/Restart禁止插件后,重新加载--Android Studio

    1:47:27 Plugin Error Problems found loading plugins: Plugin "Google Analytics Uploader" wa ...

  3. HTML5 canvas学习笔记(一)

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

  4. UI第十九节——UICollectionView

    UICollectionView其实就是UITableView的升级版,在布局方面比UITableView更出色.下面,先看代码吧 #import "RootViewController.h ...

  5. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

    <script type="text/javascript"> setInterval(function(){ var myDate = new Date(); var ...

  6. 部分Android手机拍照后照片被旋转的解决方案

      在部分Android手机(如MT788.Note2)上,使用Camera拍照以后,得到的照片会被自动旋转(90°.180°.270°),这个情况很不符合预期.仔细分析了一下,因为照片属性中是存储了 ...

  7. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  8. WPF获取应用程序启动目录的方法

    1.AppDomain.CurrentDomain.BaseDirectory using System; namespace ConsoleApplication1 { class Program ...

  9. 什么时候用Model,什么时候用Entity?

    在建立一个实体类的时候,究竟是用Model还是用Entity?比如MVC中,Model存了数据实体,但是他被称为Model,而在EF中,Entity也是存放数据实体,却被称作Entity,这两者有何区 ...

  10. DCIntrospect -iOS界面调试

    原文:http://www.cnblogs.com/kw-ios/p/3523525.html 有时,设计稿上的UI很漂亮,布局也整齐,但自己用代码写出来的就不行,不是这里高一点,就是那是低一点,使用 ...