vue项目创建教程

在终端输入以下命令检测cnpm是否安装成功 vuecli是vue脚手架工具，方便打包，部署，测试等进入你的项目目录，创建一个基于 webpack 模板的新项目 vue init webpack 项目名 进入项目 安装依赖 此时项目中会多了一个nod。

步骤一 可视化的形式创建vue项目 vue V 以后可以通过 vue V 命令打开可视化Vue管理器 步骤十五选中左侧的 依赖 选项卡，然后点击右侧的 安装依赖 步骤十九 登录码云 ，进行初始化git远程仓库 vue 命令行的方式。

1在硬盘中找一个放项目的文件夹 2在文件夹下打开命令盘，输入命令 VueProject是我们自己设置的项目名称，项目名称不能用中文 #160#160#160#160#160#160 命令vue init webpack VueProject 3。

首先看下我们的项目结构图本vue项目结构，在vuecli所生成的默认结构上有所调整，具体每个文件模块的功能将在以后的文档中进行具体讲解1在根目录下新建了mock文件夹，文件夹中增加了indexjs和utiljs主要是用于前端。

最近开发一个h5项目，项目使用的vue20+vant 主要有以下几步 1使用vuecli创建项目 2引入vuerouter 3引入vuex及vuexpersistedstate 4引入vantui 5引入sass 6引入flexible 7引入postcsspxtorem 8引入。

#160 #160 在之前已经熟悉了如何使用vuecli进行新建项目，具体见 vue入门使用vuecil新建vue项目 现在我们对具体开发中项目的整体架构进行设计，在这之前我们需要学习并掌握vue的基础知识，详细可见 vue官方文档。

官方文档 已经安装最新版本的vuecli，我很推荐这个图形化界面，非常方便你也可以通过 vue ui 命令以图形化界面创建和管理项目图形化的界面就不需要多介绍了，有中文都能很好地使用使用Vue项目管理器，选择项目地址flask。

同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用其特点主要有以下几点基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例在学习中，体验和完成了一个功能稍微。

npm 集成在 Node 中，检查是否安装完成 node v npm install g cnpm 检查安装是否完成 cnpm v cnpm install g vuecli vue init webpack vueproject 项目名 vueproject 例如 vue init web。

此时遇到报错 解决办法一个一个命令试，我这里只试了第一个就可以了3npm install 进入到刚刚创建的quotvuexdemoquot文件夹下， 运行此命令后，node_modules 就会自动生成4npm run dev。

npm install g @vuecli@390 这里由于我要搭建vue2项目 所以我选择脚手架cli3版本 安装后也是查看版本号 选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的方便遇到问题时。

一般Ionic项目创建可以使用ioniccli命令，即然而查看该命令说明和源码是没有Vue的项目模版的见 STARTER_TEMPLATES中的projectType 所以使用Vue来创建项目这是Vue很基础的东西，安装依赖并运行看下此时可以看到项目能。

我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢 Vue 项目启动过程，本文简要介绍在执行 npm run dev 的时候，会在当前目录中寻找 packagejson 文件，包含项目的 名称版本。

也可以直接查询电脑是否安装过命令运行完之后，可在目标文件夹下看到已经创建好的项目。

接下来我们用几个案例来学习使用第三方库我们打开 ElementUI 的官网，根据官网的教程一步步学习在 Vuecli 创建的项目中，我们可以使用以下命令进行安装也可以通过 CDN 的方式在页面上直接引入在 mainjs 中写入以下。