脚手架方式搭建vue项目
一、首先基于node环境,我想应该每一个前端开发者都应该懂的吧,这里安装运行什么的就不多说了。
搭建成功之后在文件夹的任何(如果是全局的话)一个位置都能按住shift键同时鼠标右键在工具框中就会出来一项——“在此处打开命令窗口”字样,点击就会出来,如图所示:
此位置就自动是你要创建项目的位置(当然,如果你想再创建文件夹,放在其他位置的话也可以直接输入打开命令npm cd+名字)。
在这里你可以检查一下,如下图的话你就算成功了!
二、安装vue脚手架
输入命令:npm install -g vue-cli
执行完之后,若不知道是否安装成功可以检验一下:vue -V(此处的-V是大写的!要注意),出现如下结果就是成功了:
三、创建项目
输入命令:vue init webpack +项目名称
如图所示,
结束之后,就是搭建完成,输入命令:cd +项目名称(此时在打开你刚刚创建的项目,进入到项目中运行);
再输入命令:npm run dev 运行项目。
也可以按照以下他告诉你的步骤,
完成之后就会出现:
之后,按照他告诉你的地址在浏览器中打开就可以了。(出现如下页面)
目录结构及含义如下:
脚手架方式搭建vue项目的更多相关文章
- 使用yarn搭建vue项目
今天尝试了一下用yarn的方式搭建vue项目,方法其实是和npm的用法一样.但是在创建过程中报错了.现在整理一下,便于后期查错时使用. 以windows系统为例 1.全局安装yarn,三种方式 官网上 ...
- 利用VUE-CLI脚手架搭建VUE项目
前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...
- 搭建vue项目环境
前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- Mac中如何搭建Vue项目并利用VSCode开发
(一)部署Node环境 (1)下载适合Mac环境的Node包,点击进入下载页面 (2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.j ...
- 手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...
- 快速搭建Vue项目
快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...
- Visual code 搭建Vue项目
使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像 淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
随机推荐
- 我的第一个Angular2应用
1需要具备的基本前端基础:HTML.CSS.JavaScript.为了实现对项目包的管理,推荐使用npm NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题:官网先下 ...
- 第7天:Q Quant库(未完待续)
一.本文大纲: 1.Python内置函数计算期权的价格 2.numpy加速数值计算 3.SciPy进行仿真模拟 4.SciPy求解器计算隐含波动率 5.matplotlib绘图 二.案例 (看不懂,略 ...
- 基本promise
function myPromise(fn) { var value = null, callbacks = []; this.then = function (onFulfilled) { call ...
- 洛谷P1993 小K的农场
思路是差分约束+dfs版SPFA. 首先来思考差分约束的过程,将题目给出的式子进行转化: 农场a比农场b至少多种植了c个单位的作物, SPFA我们考虑跑最短路,那么要让SPFA中满足的式子就是if(d ...
- error: 'retain' is unavailable: not available in automatic reference counting. 解决办法
报错原因是 项目使用的是ARC,但是有非ARC代码. 项目中要混合使用ARC和非ARC. 解决: target -> Build Phases -> Compile Sources 双击报 ...
- java线程入门一
线程优先级: 在JAVA线程中,通过一个int型变量priority来控制线程优先级,线程的有限机为1-10,默认为5,优先级高的线程获得的运行时间要高于优先级低的线程.但这只是一个提示,操作系统和J ...
- dom编程艺术笔记2--第三章
DOM 1.dom:简单理解为文档对象模型<==>节点树 2.宿主对象:浏览器提供的对象—>document对象 3. html标签为树顶点元素 head body为html子元素以 ...
- Java抽象类总结规定
1. 抽象类不能被实例化(初学者很容易犯的错),如果被实例化,就会报错,编译无法通过.只有抽象类的非抽象子类可以创建对象. 2. 抽象类中不一定包含抽象方法,但是有抽象方法的类必定是抽象类. 3. 抽 ...
- VFS 上传文件到sftp 报错 包含中文路径 或者中文文件名称
之前用Apache commons-vfs工具进行ftp操作(FTP服务器是 FileZilla Server) 上传本地文件 到 ftp服务器上,如果文件名称 包含 中文 报错 org.apache ...
- day 23 对象的名称空间 类,对象属性和方法 封装 接口提供
一.对象的特有名称空间 # 对象独有的名称空间:在产生对象时就赋初值 '''class ted: def func(): 当func里不存在参数时,调用时不需要给值 print('hah')ted.f ...