VUE脚手架搭建
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 |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
VUE脚手架搭建的更多相关文章
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...
- Vue脚手架搭建步骤
Vue脚手架的搭建步骤 1. 去node.js官网下载node.js并安装,如下图: 2. 找到下载的文件并点击安装: 一直到finish完成.安装成功 3. 通过DOS密令打开: 输入: ...
- 1.vue脚手架搭建项目
前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- vue 脚手架搭建步骤!
========================================================== 说出来都是泪,最开始都不知道从哪里开始(回头一看还是很简单的,关键是要找到入口) ...
- 基于新版 node 的 vue 脚手架搭建
1. node 安装版本 9+ 2. 命令行 创建方式 vue create project 3. 可视化 创建方式 vue ui 4. 扩展 goole 下 vue 调试工具安装 git 资源 ...
- vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...
随机推荐
- 进行app性能和安全性测试的重要性
如何让用户感觉App运行速度更快呢,这需要对App进行性能测试.限制App性能的因素按照App的系统结构分为App自身和App需要用到的后台服务. 测试App连接网络的速度 一般采用在模拟Mock环境 ...
- SpringBoot(四)之thymeleaf的使用
这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎. thymeleaf介绍 简单说, Th ...
- HDU 2084 数塔(简单DP入门)
数塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
- Codeforces Round #280 (Div. 2)_C. Vanya and Exams
C. Vanya and Exams time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- Developing Skills
题目传送门:点击打开链接 #include <iostream> #include <cstdio> #include <cstdlib> #include < ...
- JXLS 2.4.0系列教程(五)——更进一步的应用和页面边距bug修复
注:本文代码建立于前面写的代码.不过不看也不要紧. 前面的文章把JXLS 2.4.0 的基本使用写了一遍,现在讲讲一些更进一步的使用方法.我只写一些我用到过的方法,更多的高级使用方法请参考官网. ht ...
- [国嵌攻略][104][Linux内核模块设计]
内核模块示例 #inlcude <linux/init.h> #inlcude <linux/module.h> static int hello_init(){ printk ...
- [国嵌攻略][072][Linux应用程序地址布局]
程序构成 代码段.数据段.BSS段(Block Started by Symbol,又叫:未初始化数据段).堆(heap)和栈(stack).这些部分构成了Linux应用程序的重要组成部分. 内存布局 ...
- [学习OpenCV攻略][010][写入AVI文件]
cvSize(文件宽度,文件高度) 通过图片或视频文件的宽高得到尺寸信息,返回值是CvSize cvCreateVideoWriter(输出文件名,编码格式,帧率,图像大小) 通过设置输出视频的格式信 ...
- setTimeout,setInterval运行原理
function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通 ...