vue进阶1 - 项目搭建(vue-cli)

2018-07-13 admin

一、安装Nodejs

  1. 点击 https://nodejs.org/en/download/ 下载并安装node。
  2. 安装成功后,在终端输入 npm -v ,会显示npm的版本信息。

二、安装淘宝镜像

npm是nodejs的包管理工具,为了加快下载速度,可安装淘宝镜像,安装成功后可cnpm代替npm,在终端输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安装vue-cli

全局安装vue-cli,在终端输入

npm install -g vue-cli / cnpm i -g vue-cli

安装成功后,可用 vue -V 查看vue版本。

四、创建vue项目

使用脚手架创建项目:vue init webpack vue-demo vue-demo为项目名称

AppledeMacBook-Pro-3:~ apple$ vue init webpack vue-demo
? Project name vue-demo        //(工程名):回车
? Project description A Vue.js project    // (工程介绍):回车
? Author crr     // (作者名):作者名
? Vue build standalone        // (是否安装编译器):回车
? Install vue-router? Yes      // (是否安装Vue路由):回车
? Use ESLint to lint your code? No     //(是否使用ESLint检查js代码):n
? Set up unit tests No       //(安装单元测试工具):n
? Setup e2e tests with Nightwatch? No     //(是否安装端到端测试工具):n
? Should we run `npm install` for you after the project has been created? (recom
mended) npm              //  (recommended):回车

clipboard.png

五、启动项目

  1. 进入项目目录: cd vue-demo
  2. 安装项目所需要的依赖: npm install
  3. 启动项目: npm run dev

clipboard.png

注意:Vue.js 不支持 IE8 及其以下 IE 版本。

六、项目结构

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要项目配置
│   └── ...
├── src/
│   ├── main.js                 # 应用入口js文件
│   ├── App.vue                 # 主应用程序组件
│   ├── components/             # 公共组件目录
│   │   └── ...
│   └── router/                 # 前端路由
│   │   └── ...
│   └── assets/                 # 模块资源(由webpack处理)
│       └── ...
├── static/                     # 纯静态资源(直接复制)
├── .babelrc                    # babel 配置,es6需要babel编译
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # 编辑器 配置
├── .gitignore                  # 过滤无需上传的文件
├── index.html                  # index.html模板
└── package.json                # 构建脚本和依赖关系

原文链接:https://segmentfault.com/a/1190000015614252

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35872.html

文章标题:vue进阶1 - 项目搭建(vue-cli)

相关文章
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
回到顶部