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. Smart-image通过SoftReference提高性能

    文章导读: 文件介绍了常见的图片下载开源插件smart-image, 由于移动设备硬件受限,因此Android的相关app都要考虑到性能的关系, 所以很多的第三方插件都使用到了缓存cache技术,本人 ...

  2. 加载进度圈,带遮罩层(jquery)

    如图: Js下载地址:http://files.cnblogs.com/files/holdon521/cvi_busy_lib.js 如下使用实例: <script src="/st ...

  3. jQuery_serialize的用法

    jQuery_serialize(form表单序列化)用于在前端要传很多值往后端的时候: <!DOCTYPE html> <html lang="en"> ...

  4. BZOJ 1001: [BeiJing2006]狼抓兔子【最大流/SPFA+最小割,多解】

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 23822  Solved: 6012[Submit][ ...

  5. [bzoj1774] [Usaco2009 Dec]Toll 过路费

    Floyd神用法...设dis[i][j]表示i点到j点的最短路(只算边权),map[i][j]表示i到j最小费用 将n个点先按照点权排一下序...这样就可以比较方便的求出路径上最大点权了... 因为 ...

  6. 三维dp&codeforce 369_2_C

    三维dp&codeforce 369_2_C 标签: dp codeforce 369_2_C 题意: 一排树,初始的时候有的有颜色,有的没有颜色,现在给没有颜色的树染色,给出n课树,用m种燃 ...

  7. linux系统下,警告:warning: implicit declaration of function ‘gets’ [-Wimplicit-function-declaration] 和 warning: the `gets' function is dangerous and should not be used. 的由来和解决方法。

    字符数组 的英文名字是 char [] gets()函数的基本用法为:char *gets(char *s); 该函数的参数是一个字符数组,该函数的返回值也是一个字符数组. linux下的代码如下: ...

  8. ubuntu sendmail配置发送邮件

    ubuntu中sendmail函数可以很方便的发送邮件,ubuntu sendmail先要安装两个包. 必需安装的两个包: 代码  sudo apt-get install sendmail sudo ...

  9. 蓝桥杯 0/1背包问题 (java)

      今天第一次接触了0/1背包问题,总结一下,方便以后修改.不对的地方还请大家不啬赐教! 上一个蓝桥杯的例题: 数据规模和约定 代码: import java.util.Scanner; public ...

  10. 自写 zTree搜索功能 -- 关键字查询 -- 递归无限层

    唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句“找不到是不可 ...