笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了,

偶尔心血来潮想试着自己搭建一个vue项目

我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好了node和npm

如果你还没安装这些东西,就先去安装再来学习搭建vue项目吧

一、安装vue-cli

1. 开启命令行,输入指令(Windows的命令行开启方法为  键盘上的 开始键 + R 同时按下,然后输入 cmd 就能打开命令行了)

npm install --global vue-cli  (--global全局安装)

那如果安装好了我们怎么查看的到是否已经安装好了呢?

其实已经在我们本地了

本地路径为  C:\Users\Administrator\AppData\Roaming\npm

里面的文件大概长这个样子

那么vue-cli我们就安装好了

二、创建自己的项目

1. 随便找一个文件夹(这里我以桌面 test文件夹 为例)

在cmd中进入到该文件夹

我这里呢  使用的进入命令(cd)  一步一步进入到桌面test文件夹的

你也可以在命令行中  拖入文件夹   这样就可以直接进入到该文件夹

然后输入命令

vue init webpack vue项目   (“vue项目” 是我项目的名称,你也可以换一个名称)

之后呢,cmd就会对你提问,我直接把回答好的图放出来吧

等待它下载完成,就好了

我们就可以去到文件夹里面查看项目了

之后我们的运行指令是

npm run dev

一个简单的vue项目就搭建好了鸭

教你如何搭建vue项目的更多相关文章

  1. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  2. 利用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  3. 手把手教你如何搭建iOS项目基本框架

    手把手教你如何搭建iOS项目基本框架 今天我们来谈谈如何搭建框架,框架需要做一些什么. 第一步:找到我们的目标我们的目标是让其他开发人员拿到手后即可写页面,不再需要考虑其他的问题. 第二步:我们需要做 ...

  4. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  5. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  6. 快速搭建Vue项目

    快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...

  7. Visual code 搭建Vue项目

    使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像  淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...

  8. vue-cli搭建vue项目更新

    vue-cli搭建vue项目更新 更新之前一篇博客错误的地方,在使用vue init webpack xxx 之后并不需要使用npm install 下载依赖包,而是直接根据提示 打开文件夹 再npm ...

  9. 用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...

随机推荐

  1. 对angular.js的一点理解

    最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...

  2. CentOS7.5安装配置conky(极简)

    1.安装epel源 下载地址:http://dl.fedoraproject.org/pub/epel/ 找到epel-release-XXXXXXX.rpm文件,下载解压 rpm -ivh epel ...

  3. BZOJ 3261: 最大异或和位置-贪心+可持久化01Trie树

    3261: 最大异或和 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 3519  Solved: 1493[Submit][Status][Discu ...

  4. HDU 2665.Kth number-可持久化线段树(无修改区间第K小)模板 (POJ 2104.K-th Number 、洛谷 P3834 【模板】可持久化线段树 1(主席树)只是输入格式不一样,其他几乎都一样的)

    Kth number Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. maven 打包可运行jar包(转)

    目录 1.前提 2.方法一:使用maven-jar-plugin和maven-dependency-plugin插件打包 3.方法二:使用maven-assembly-plugin插件打包 4.方法三 ...

  6. Python开发基础-Day7-闭包函数和装饰器基础

    补充:全局变量声明及局部变量引用 python引用变量的顺序: 当前作用域局部变量->外层作用域变量->当前模块中的全局变量->python内置变量 global关键字用来在函数或其 ...

  7. 解决phpStudy启动网站警告问题

    在用phpStudy的时候,在页面中会有一些警告 notice:Undefined variable... notice:Undefined index... 在php.ini里面找到 display ...

  8. eclipse汉化 adt汉化

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha

  9. [BZOJ2159]Crash的文明世界(斯特林数+树形DP)

    题意:给定一棵树,求$S(i)=\sum_{j=1}^{n}dist(i,j)^k$.题解:根据斯特林数反演得到:$n^m=\sum_{i=0}^{n}C(n,i)\times i!\times S( ...

  10. Codeforces Round #450 (Div. 2) ABCD

    这次还是能看的0 0,没出现一题掉分情况. QAQ前两次掉分还被hack了0 0,两行清泪. A. Find Extra One   You have n distinct points on a p ...