vue-cli起项目步骤

小咪咪 2021-11-26 20:46 376阅读 0赞

**1.全局安装 vue-cli**

**老版本：npm install -g vue-cli (npm uninstall vue-cli -g 卸载)**

**新版本：****`npm install -g @vue/cli`**

安装淘宝cnpm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

**2.创建一个基于webpack模板的新项目**

**老版本：vue init webpack my-blog**

**新版本：vue create ele-app**

**3.一路No**

**4.cd my-blog**

**5.npm run dev(npm run serve)**

安装axios

**npm install --save axios**

安装vuex

**npm install vuex --save**

安装路由

**npm install vue-router --save**

安装better-scroll（移动端滚动）

**npm install better-scroll --save / cnpm i -S better-scroll**

安装element-UI

**npm i element-ui -S**

安装mint-UI

**npm install mint-ui -S**

**一、 安装 node.js**

**安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。**

**二、安装webpack**

npm install webpack -g

安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。

**三、安装 vue-cli**

npm install -g vue-cli

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

**四、使用vue-cli来构建项目**

**　　1、在硬盘中找一个放项目的文件夹**

**　　2、在文件夹下打开命令盘，输入命令**

Vue-Project是我们自己设置的项目名称，项目名称不能用中文

vue init webpack Vue-Project

![1453885-20180810115359643-816192686.png][]

**　　3、进入项目工程目录**

**　　4、安装项目所需依赖 npm install**

**　　5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource**

npm install vue-router vue-resource --save

创建完成的项目目录，如下图

![1453885-20180810115624848-1671122042.png][]

各个目录的作用

![1453885-20180810115649579-286359444.png][]

**最后一步启动项目**

npm run dev

![1453885-20180810115821251-315177806.png][]

启动成功，打开浏览器8080窗口，页面如图所示

![1453885-20180810115907639-1087486712.png][]

转载于:https://www.cnblogs.com/andyZhang0511/p/10935259.html

[1453885-20180810115359643-816192686.png]: /images/20211126/5bcfc973ddf848759253ef9cb1c55d2b.png
[1453885-20180810115624848-1671122042.png]: /images/20211126/94f5b0437fa84173af1ba6798b322166.png
[1453885-20180810115649579-286359444.png]: /images/20211126/f123ef6a975d44b4bdfd00068540483a.png
[1453885-20180810115821251-315177806.png]: /images/20211126/eb2dc544df664fc483025332873ce059.png
[1453885-20180810115907639-1087486712.png]: /images/20211126/2c1a8c6f85fa4d57ba1f44ae4ec3e9ed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot项目@Email不起作用

SpringBoot项目@Email不起作用新版本springboot要加上 <dependency> <groupId>org

阳光穿透心脏的1/2处/ 2023年10月04日 08:52/ 0 赞/ 51 阅读

相关 vueCli pwa模式增加

vue-cli2X或者vue-cli3X 文档见[官网][Link 1] 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。配置常用的是

港控/mmm°/ 2023年07月18日 14:16/ 0 赞/ 160 阅读

相关运行Vue项目步骤

![20200306140034823.png][] [20200306140034823.png]: https://img-blog.csdnimg.cn/202003

绝地灬酷狼/ 2023年07月11日 15:19/ 0 赞/ 103 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 323 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 398 阅读

相关 ionic 创建项目步骤

你的ionic项目就已经构建成功了! 下面是一些技巧: \-通过cd命令进入你的项目:$ cd Ionic\_1stTutorial \-设置项目使用Sass:ionic

古城微笑少年丶/ 2022年07月08日 18:24/ 0 赞/ 249 阅读

相关创建Hibernate项目步骤

创建项目（java project / dynamic web project）添加需要的jar包一、在项目上单击右键，选择New ——》other 二、

Myth丶恋晨/ 2022年04月22日 06:32/ 0 赞/ 294 阅读

相关微信里调起微信支付步骤

微信JS-SDK使用步骤： 1.引入文件：<script type="text/javascript" src="http://res.wx.qq.com/open/

╰+哭是因爲堅強的太久メ/ 2022年02月23日 11:18/ 0 赞/ 406 阅读

相关 vue-cli起项目步骤

1.全局安装 vue-cli 老版本：npm install -g vue-cli (npm uninstall vue-cli -g 卸载) 新版本：`npm insta

小咪咪/ 2021年11月26日 20:46/ 0 赞/ 377 阅读

相关 vue项目打包步骤

vue项目打包一、终端运行命令 npm run build 二、打包成功的标志与项目的改变，如下图： ![70][] ![70 1][] 3

你的名字/ 2021年09月15日 14:50/ 0 赞/ 517 阅读