一、安装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. Scala:fold,foldLeft和foldRight区别与联系 reduce

    Scala:fold,foldLeft和foldRight区别与联系 我们来看看最后一个函数:reduce.使用reduce我们可以处理列表的每个元素并返回一个值.通过使用reduceLeft和red ...

  2. 'Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set.

    UserWarning: Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set. Defaulting SQLALCHEMY_DATA ...

  3. 01 SQL核心语句

    在 sqlplus 中可以使用 ; 或 / 来执行一条 sql 语句, 但是 / 必须要换行, 个人感觉只有那些脚本啊什么的最后一般使用 / , 其他的都使用; 核心语句 SELECT oracle  ...

  4. C++ STL标准模板库(vector)

    //vector的使用 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<vector> using na ...

  5. weblogic配置oracle数据源

    在weblogic配置oracle数据源还是挺简单的,网上也有很多关于这方面的文章,写给自己也写给能够得到帮助的人吧.weblogic新建域那些的就不说了哈.点击startWebLogic文件,会弹出 ...

  6. bootstrap基础学习十一篇

    bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...

  7. Spark源码分析(四)-Job提交过程

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3903478.html   本文将以一个简单的WordCount为例来看看Job的提交过程

  8. 添加RichEdit控件后导致MFC对话框程序无法运行的解决方法

    新建一个基于对话框的MFC程序,对话框上添加了RichEdit控件,编译成功后无法运行起来,Debug版本与Release版本均不行! Windbg分析结果: WARNING: Stack unwin ...

  9. springboot如何直接读取webapp下页面?

    公司改用springboot的时候,将页面相关的文件都放在了src/main/webapp下,我直接通过main方式启动的时候,无法读取到src/mian/webapp下文件,但是通过spring-b ...

  10. GCD介绍(四): 完结

    转自http://www.dreamingwish.com/dream-2012/gcd-four-the-the-odds-and-ends.html Dispatch Queue挂起 dispat ...