vue脚手架2创建项目（vue脚手架创建项目目录详解）

今天给各位分享vue脚手架2创建项目的知识，其中也会对vue脚手架创建项目目录详解进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、vue脚手架2.0和3.0创建项目的区别？
2、使用vue-cli（vue脚手架）快速搭建项目
3、不依赖vue-cli脚手架创建vue项目
4、vue项目完整搭建步骤
5、vue项目创建和部署使用

vue脚手架2.0和3.0创建项目的区别？

一、生成项目命令

安装3.x版本的Vue脚手架： npm install -g @vue/cli ,创建Vue项目命令： vue create 项目名称或基于ui界面创建Vue项目,命令： vue ui

基于2.x的旧模板，创建Vue项目 npm install -g @vue/cli-init , vue init webpack 项目名称

二、目录的区别

3.0版本根目录新增了 babel.config.js和.browserslistrc public文件夹

src文件夹中多了views文件夹，相比2.0，在index.js变为了router.js

2.0版本相比3.0版本有build和config文件夹等，src文件夹中有router文件夹，里面有index.js

使用vue-cli（vue脚手架）快速搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上，node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：(淘宝镜像命令)

其实对于安装vue-cli，使用npm命令和cnpm命令都是可以的，个人觉得使用npm安装的比较慢，而且很可能会因为网络问题而出错，所以还是觉得使用cnpm稳一点。

（1）全局安装 vue-cli ，在命令提示窗口执行：

（2）安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：

不依赖vue-cli脚手架创建vue项目

我们一般创建vue项目都是通过vue-cli脚手架去创建，这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等

项目源码：

1.新建项目

2.使用vscode打开项目

3.初始化

4.安装基本的 npm 包

5.创建文件夹以及文件

6.配置webpack.config.js

在这之前先安装一些依赖

模板解析依赖：

样式依赖:

css-loader:

文件加载依赖

解析es6语法依赖:

这是一个webpack插件，可简化HTML文件的创建以服务您的webpack捆绑软件

现在就可以配置webpack.config.js，如果有什么不清楚的可以参考官网

7.安装解析依赖

8.修改package.json文件

9.配置babel,创建.babelrc文件

修改webpack.config.js

如果编译时报错的话可能是因为你没有安装依赖:

10.主要文件：

app.vue：

index.js:

html文件：

Vue项目文件夹大致参考

1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins文件夹下可以写各种调用ajax请求方法的方法，然后在需要调用这些方法请求数据的文件中：

这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据直接在文件类似this.getAllDemoClass();就能调用方法

2.components通用组件存放文件夹：

在这个文件夹下封装了项目需要的组件然后在components下的index.js中向外暴露即可然后在使用组件的文件中引用components即可

后续：

1.引入ant-design-vue：

具体引入操作可见官网

2.引入Vue Router

路由配置文件：router/index.js

3.引入vuex

新建store/index.js

news/index.vue

4.页面顶部进度条插件Nprogress

使用：

vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为：

在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装，可以使用淘宝的镜像：

在终端输入以下命令：

检测cnpm是否安装成功

vue-cli是vue脚手架工具，方便打包，部署，测试等。

进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

vue项目创建和部署使用

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架 vue ，作为一个基础的了解。 vue 的作者是国人尤雨溪。官网描述 vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：

基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没有nodeJs环境，所以直接从环境搭建开始。

配置淘宝源，注意 -g 是全局安装

完成之后将使用 cnpm 替换 npm ，验证 cnpm :

之后的依赖安装就可以使用 cnpm install package 或简写 cnpm i package 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用 -g -D --save 等参数设置安装范围。

安装 vue-cli

vue-cli 是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。

安装命令

验证安装

之后我们看到一个 hello-world 的文件夹，里边包括默认生成的一些配置和 App.vue , main.js 等程序文件，如下是支持 vue-router 路由（控制页面切换等操作）的一个 main.js 具体内容

注意使用路由时，不要忘记在主模板里添加 router-view/router-view 标签，表示路由切换的位置，否则路由页面无法正常展示。

先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行

之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。

既然提到了部署，默认的部署使用 npm/cnpm 进行，如下命令，输出内容在 /dist 目录。

可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。

启动 vue-cli 图形界面

然后按照提示访问即可。

以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托 vue 提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。

1. Vue.js介绍

2. Vue CLi脚手架

vue脚手架2创建项目（vue脚手架创建项目目录详解）,vue脚手架2创建项目,信息,文章,源码,第1张