一、安装node.js

  1、什么是node.js?

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。

    只需要在官网上下载对应的系统软件安装上即可(http://nodejs.cn/)

  2、安装

    略

二、vue-cli脚手架

  1、vue-cli的作用?

     vue-cli是一个vue脚手架,可以快速构造项目结构
     2、vue-cli集成的项目模板:
          simple  很少简单
          webpack 包含ESLint代码规范检查和unit单元测试等
          webpack-simple 没有代码规范检查和单元测试
          browserify 使用的也比较多
          browserify-simple

  3、安装vue-cli流程

    1、 安装vue-cli,配置vue命令环境
           cnpm install vue-cli -g    #-g指代的是全局安装
         vue --version          #查看版本
         vue list                                #列出可以使用的模板

    2、 初始化项目(使用vue-cli),生成项目模板
         语法:vue init 模板名  项目名
          Project name (myfristvue)       项目名称,默认即可
         
    3 进入生成的项目目录,安装项目依赖模块包
         cd vue-cli-demo
         npm install        #吧响应的依赖模块都安装上,解决依赖性

    4 运行
        npm run dev          #启动测试服务打开浏览器默认8080端口,如果端口被占用就自动往后找(8081),浏览器默认页面是app.vue  测试环境下可以这样运行
        npm run build        #将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

三、vue.js文件目录

 ├── index.html 入口页面

    ├── build                           构建脚本目录
│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
  ├── eslintrc.js 配置缩进,允许几个字符等配置文件
   eslintignore 指定哪些文件不进行exlintrc的检测

├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录,这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state)
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源,不会被wabpack构建。
└── test 测试文件目录(unit&e2e)
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
四、其他   1、ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格。[官网](http://eslint.org)    
  
  2、会出现的问题
    1、问题Bug:如果版本升级到node 8.0 和 npm 5.0,控制台会报错:
        GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
    2、解决方法:
        a)降低Node版本到7.9或以下
        b)修改build/dev-server.js文件,如下:
            var hotMiddleware = require('webpack-hot-middleware')(compiler, {
              log: () => {},
              heartbeat:2000 //添加此行
            })
        参考:https://github.com/vuejs-templates/webpack/issues/731    

安装vue-cli脚手架的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

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

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

  3. 安装vue CLI后, 出现安装权限问题

    问题:安装vue CLI后,出现:npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/l ...

  4. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  5. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  6. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  7. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  8. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  9. Vue cli 脚手架使用

    1:基本的安装 安装node 安装npm Windows 更改环境变量 重启 环境变量生效 安装vue-cli 安装webpack 2:项目构建 https://segmentfault.com/a/ ...

  10. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

随机推荐

  1. SAML2.0 协议初识(三)——IDP

    IDP,即提供身份认证服务的一端,通常,当 IDP 接收到 SP 发送的 SAML 认证请求后,解析 SAMLRequest 参数,包括 acs 地址.SP EntityId.绑定方式.是否加密等信息 ...

  2. css3动画4

    效果: 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  3. char类型能否存储一个中文字符?为什么

    char类型能否存储一个中文字符?为什么 解答:可以.一个char是两个字节,而一个中文也是两个字节.

  4. 【BZOJ】3403: [Usaco2009 Open]Cow Line 直线上的牛(模拟)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3404 裸的双端队列.. #include <cstdio> #include <c ...

  5. 使用Using的注意事项

    参数传递 C#中有四种参数类型:值类型,Ref参数,Out参数,params参数.默认参数都是以传值方式传递,这意味着方法中的变量会在内存中被分配新的存储空间,并赋值.对于引用类型,这种传值意味着传递 ...

  6. 【转】msxml 操作xml

    转自http://blog.csdn.net/dai_jing/article/details/8393392,原始出处不详. 1.简介 在.NET平台,微软为C#或托管C++程序员提供了丰富的类库, ...

  7. ipv6修改DNS服务-首选DNS服务器:240c::6666

    下一代互联网国家工程中心推出的IPv6 DNS服务 首选DNS服务器:240c::6666 备用DNS服务器:240c::6644   来自下一代互联网国家工程中心官网消息显示,日前,下一代互联网国家 ...

  8. boost数据结构variant

    variant和any有些类似,是一种可变类型,是对C/C++中union概念的增强和扩展:    普通的union只能持有普通数据类型,而不能持有string.vector等复杂类型,而varian ...

  9. 主流数据文件类型(.dat/.txt/.json/.csv)导入到python

    手写很累,复制的同学请点赞犒劳下在下哦 ^_^ 一.对于.CSV类型的数据 它们的数据导入都很简单 且看下面一顿操作: 我平时一般是读取整个文件,直接这样就可以了: import pandas as ...

  10. iOS7中弹簧式列表的制作

    本文转载至 http://www.devdiv.com/forum.php?mod=viewthread&tid=208170&extra=page%3D1%26filter%3Dty ...