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. JavaScript获取当前url路径

    1.假设当前页完整地址是:http://localhost:61768/Home/Index?id=2 //获取当前窗口的Url var url = window.location.href; //结 ...

  2. 【LCT维护基环内向树森林】BZOJ4764 弹飞大爷

    4764: 弹飞大爷 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 101  Solved: 52[Submit][Status][Discuss] ...

  3. java字符串比较

    我最近刚学java,今天编程的时候就遇到一个棘手的问题,就是关于判断两个字符串是否相等的问题.在编程中,通常比较两个字符串是否相同的表达式是"==",但在java中不能这么写.在j ...

  4. 开发 | 微信小程序API-wx.setScreenBrightness/wx.getScreenBrightness

    前言 最近接触了微信小程序 API - wx.setScreenBrightness .wx.getScreenBrightness 接口,调用该接口可以调节并显示手机屏幕亮度数据.对于喜欢腾讯新闻. ...

  5. 从头开始基于Maven搭建SpringMVC+Mybatis项目(3)

    接上文内容,本节介绍基于Mybatis的查询和分页功能,并展示一个自定义的分页标签,可重复使用以简化JSP页面的开发. 从头阅读传送门 在上一节中,我们已经使用Maven搭建好了项目的基础结构,包括一 ...

  6. python写一个网页翻译器

    import urllib.requesturl='https://fanyi.baidu.com/v2transapi'data={}data['i']=opdata['from']='AUTO'd ...

  7. HDU 2503 a/b + c/d(最大公约数与最小公倍数,板子题)

    话不多说,日常一水题,水水更健康!┗|`O′|┛ 嗷~~ a/b + c/d Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768 ...

  8. 2017ecjtu-summer training #4 UESTC 1584

    此题链接 http://acm.uestc.edu.cn/#/problem/show/1584 此题和hdu1541几乎完全一样,我们要先对坐标排序,再进行操作. hdu1541题解 http:// ...

  9. linux下如何删除文件夹?

    直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目录名字-r 就是向下递归,不管有多少级目录,一并删除:-f 就是直接强行删除,不作任何提示的意思. 例如:删除文件夹实例: rm -rf ...

  10. HttpClient 用于解决测试时候乱码的问题

    @Test public void doPostWithParam() throws Exception, IOException { CloseableHttpClient httpClient = ...