项目构建

项目推荐直接使用 Vue 官方提供的脚手架(Vue-cli),所以第一步首先是安装脚手架。在命令行或者 IDE 的 Terminal 窗口中输入以下命令即可自动安装:

npm install -g vue-cli

这个是全局安装 vue-cli ,以后就不需要再装了。装好之后就可以开始创建应用了。

创建应用

还是在命令行里面,进入想要创建应用的目录,然后输入:

vue init webpack app

这里面的 webpack 是一个构建和打包应用的工具,具体的我也不是很清楚,想了解的可以看这里,最后的 app 是你要创建的应用的名字,可以换成你需要的名字,回车之后等下之后会提示 downloading template ,等它完成后有几个初始化的选项需要你选择:

  • 首先会询问项目名,描述,作者三项,直接回车即可
  • 接着有一个 vue build 选项,直接回车即可
  • 然后会问你要不要安装 vue-router,选 y/n 都行,n 的话以后要用的话需要再装,但是肯定是要用的,,,所以推荐选 y
  • 最后是语法检查,单元测试,项目测试三项直接输入 n 就行

选完之后会提示你怎么 To Get Start,照着提示把三条命令都输一遍就行了。

npm install 命令回车之后会自动生成项目结构和安装各种依赖文件,等着就行,完成之后输入 npm run dev 回车,提示服务正在启动,稍等下完成后就会自动在浏览器打开初始页面。

VUE安装步骤的更多相关文章

  1. deepin vue安装步骤

    deepin安装node.js sudo wget https://nodejs.org/dist/v9.2.0/node-v9.2.0-linux-x64.tar.xz tar xJf node-v ...

  2. VUE安装步骤1

    文件结构 用官方的 vue-cli 生成的项目文件结构如上图所示,简单介绍下上面图中各文件的作用. src 文件夹 : 1. assets 文件夹:存放各种资源文件,如图片等 2. component ...

  3. 2.Vue调试工具vue-devtools的安装步骤和使用

    1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:

  4. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  5. vue学习笔记 vue安装

    一.安装步骤:(用cmd命令用管理身份安装比较顺利) 1.安装node,安装后可以输入npm -v 查看版本,升级npm可用 cnpm install npm -g 2.安装vue 输入cnpm in ...

  6. vue-cli安装步骤

    vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件:  node在4.以上,npm在3以上 安装 指令: 1.npm install -g vue-cli 在全 ...

  7. vue安装以及配置

    今天又重新做了一遍vue的安装步骤: 1.条件,vue需要安装在node环境里面,确保安装了node. 2.安装脚手架. 找一个文件夹,放你的项目.待会儿安装的时候,项目会在你找的这个文件下新增一个你 ...

  8. vue安装遇到的5个报错小结

    前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...

  9. Vue-cli的安装步骤详细版本

    https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件:node在4.以上,npm在3以上 安装步骤:1.cmd打开命令行窗口2.输入cnpm in ...

随机推荐

  1. ubuntu-server部署php+mysql运行环境

    1.apt-get install git php5 mysql-server apache2 phpmyadmin 2.sudo ln -s /usr/share/phpmyadmin /var/w ...

  2. UVa 11090 Going in Cycle!! (Bellman_Ford)

    题意:给定一个加权有向图,求平均权值最小的回路. 析:先十分答案,假设答案是 ans,那么有这么一个回路,w1+w2+w3+...+wk < k*ans,这样就是答案太大,然后移项可得,(w1- ...

  3. HDU 6153 A Secret (KMP)

    题意:给定两个串,求其中一个串 s 的每个后缀在另一个串 t 中出现的次数. 析:首先先把两个串进行反转,这样后缀就成了前缀.然后求出 s 的失配函数,然后在 t 上跑一遍,如果发现不匹配了或者是已经 ...

  4. 编写高质量代码改善C#程序的157个建议——建议112:将现实世界中的对象抽象为类,将可复用对象圈起来就是命名空间

    建议112:将现实世界中的对象抽象为类,将可复用对象圈起来就是命名空间 在我们身边的世界中,对象是什么?对象就是事物,俗称“东西”.那么,什么东西算得上是一个对象呢?对象有属性.有行为.以动物为例,比 ...

  5. 编写高质量代码改善C#程序的157个建议——建议68:从System.Exception或其他常见的基本异常中派生异常

    建议68:从System.Exception或其他常见的基本异常中派生异常 微软建议:从System.Exception或其他常见基本异常之一派生异常.在Visual Studio中输入Excepti ...

  6. [LintCode笔记了解一下]44.Minimum Subarray

    这道题和max subarray很类似,我用local 和 global 的dp方式阔以解决这道 那么我们来看动态规划的四个要素分别是什么? State: localmin[i] 表示以当前第i个数最 ...

  7. 7、Semantic-UI之图标与按钮组

    7.1 图标按钮   Semantic-UI中可以定义一组图标样式,并且可以在按钮中使用图标. 示例:定义一个图标按钮 <button class="ui black button&q ...

  8. 纯分享scp协议如何工作

    scp协议是什么, wiki上说: Secure copy or SCP is a means of securely transferring computer files between a lo ...

  9. TSQL--游标Dem

    DECLARE @ID INT; ); ); DECLARE MyCursor CURSOR FOR ) ID,NAME1 FROM dbo.TB1 ORDER BY ID; OPEN MyCurso ...

  10. Windows store app[Part 4]:深入WinRT的异步机制

    接上篇Windows store app[Part 3]:认识WinRT的异步机制 WinRT异步机制回顾: IAsyncInfo接口:WinRT下异步功能的核心,该接口提供所有异步操作的基本功能,如 ...