安装vue-cli脚手架
一、安装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脚手架的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- 安装vue CLI后, 出现安装权限问题
问题:安装vue CLI后,出现:npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/usr/l ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- ubuntu下安装vue/cli提示No command 'vue' found
通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- Vue cli 脚手架使用
1:基本的安装 安装node 安装npm Windows 更改环境变量 重启 环境变量生效 安装vue-cli 安装webpack 2:项目构建 https://segmentfault.com/a/ ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
随机推荐
- Scala:fold,foldLeft和foldRight区别与联系 reduce
Scala:fold,foldLeft和foldRight区别与联系 我们来看看最后一个函数:reduce.使用reduce我们可以处理列表的每个元素并返回一个值.通过使用reduceLeft和red ...
- 'Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set.
UserWarning: Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set. Defaulting SQLALCHEMY_DATA ...
- 01 SQL核心语句
在 sqlplus 中可以使用 ; 或 / 来执行一条 sql 语句, 但是 / 必须要换行, 个人感觉只有那些脚本啊什么的最后一般使用 / , 其他的都使用; 核心语句 SELECT oracle ...
- C++ STL标准模板库(vector)
//vector的使用 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<vector> using na ...
- weblogic配置oracle数据源
在weblogic配置oracle数据源还是挺简单的,网上也有很多关于这方面的文章,写给自己也写给能够得到帮助的人吧.weblogic新建域那些的就不说了哈.点击startWebLogic文件,会弹出 ...
- bootstrap基础学习十一篇
bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...
- Spark源码分析(四)-Job提交过程
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3903478.html 本文将以一个简单的WordCount为例来看看Job的提交过程
- 添加RichEdit控件后导致MFC对话框程序无法运行的解决方法
新建一个基于对话框的MFC程序,对话框上添加了RichEdit控件,编译成功后无法运行起来,Debug版本与Release版本均不行! Windbg分析结果: WARNING: Stack unwin ...
- springboot如何直接读取webapp下页面?
公司改用springboot的时候,将页面相关的文件都放在了src/main/webapp下,我直接通过main方式启动的时候,无法读取到src/mian/webapp下文件,但是通过spring-b ...
- GCD介绍(四): 完结
转自http://www.dreamingwish.com/dream-2012/gcd-four-the-the-odds-and-ends.html Dispatch Queue挂起 dispat ...