1、什么vue-cli

   vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的.

步骤:

2.安装
   ->全局安装
   npm install vue-cli -g
 或者
   cnpm install vue-cli -g
->查看是否安装成功
   vue -V(大写的V)
3.使用
   ->生成项目名是wsw的模板
    vue init webpack wsw
   ->进入项目并安装依赖
    cd wsw 
    cnpm install
   ->运行
    npm run dev

4、vue目录结构

目录解析

目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

VUE脚手架搭建的更多相关文章

  1. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  2. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  3. Vue脚手架搭建步骤

    Vue脚手架的搭建步骤 1.   去node.js官网下载node.js并安装,如下图: 2.   找到下载的文件并点击安装: 一直到finish完成.安装成功 3.   通过DOS密令打开: 输入: ...

  4. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  5. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  6. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  7. vue 脚手架搭建步骤!

    ========================================================== 说出来都是泪,最开始都不知道从哪里开始(回头一看还是很简单的,关键是要找到入口)  ...

  8. 基于新版 node 的 vue 脚手架搭建

    1. node 安装版本 9+ 2. 命令行 创建方式   vue create project 3. 可视化 创建方式  vue ui 4. 扩展 goole 下 vue 调试工具安装 git 资源 ...

  9. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

随机推荐

  1. Android基础_ContentProvider组件

    一.了解Contentprovider组件 1.1Contentprovider是数据的提供者,Android四大组件之一,程序之间数据共享的接口 1.2activity系统中对数据的访问限制十分严格 ...

  2. 微信第三方全网发布接入检测(PHP)

    官方文档  https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&ve ...

  3. MATLAB R2017a 安装与破解

    第一步: 到我的百度网盘下载MatlAB2017a的原安装程序和破解补丁: 链接:https://pan.baidu.com/s/1jJz97DW 提取密码: d59m 第二步: 下载的两个iso文件 ...

  4. JavaProblem之hashCode详解

    一.HashCode简介 1.1.什么是Hash和Hash表 要想清楚hashCode就要先清楚知道什么是Hash 1)Hash hash是一个函数,该函数中的实现就是一种算法,就是通过一系列的算法来 ...

  5. Uva 11729 Commando War (简单贪心)

    Uva 11729  Commando War (简单贪心) There is a war and it doesn't look very promising for your country. N ...

  6. bzoj:2018 [Usaco2009 Nov]农场技艺大赛

    Description Input 第1行:10个空格分开的整数: N, a, b, c, d, e, f, g, h, M Output 第1行:满足总重量最轻,且用度之和最大的N头奶牛的总体重模M ...

  7. 喵哈哈村的魔法考试 Round #1 (Div.2) 题解&源码(A.水+暴力,B.dp+栈)

    A.喵哈哈村的魔法石 发布时间: 2017年2月21日 20:05   最后更新: 2017年2月21日 20:06   时间限制: 1000ms   内存限制: 128M 描述 传说喵哈哈村有三种神 ...

  8. Vijos P1785 同学排序【模拟】

    同学排序 描述 现有m位同学,第1位同学为1号,第2位同学为2号,依次第m位同学为m号.要求双号的学生站出来,然后余下的重新组合,组合完后,再次让双号的学生站出来,重复n次,问这时有多少同学出来站着? ...

  9. [bzoj1594] [Usaco2008 Jan]猜数游戏

    二分答案(二分没冲突的前Q-1个问题),用并查集判定(用法同bzoj 1576) 假设一个询问区间[l,r],最小干草堆数目是A,我们可以得出[l,r]上的干草堆数目都>=A. 二分出mid后, ...

  10. java线程间通信:一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...