Vue-cli脚手架创建项目全流程----保姆级教程

最新推荐文章于 2023-01-30 10:23:21 发布

`Pluto.

最新推荐文章于 2023-01-30 10:23:21 发布

阅读量2.3k

点赞数 5

分类专栏： vue 文章标签： vue.js webpack npm

本文链接：https://blog.csdn.net/iron_nini/article/details/121254260

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本篇文章详细讲述就vue脚手架使用安装全过程，在使用vue-cli之前，请确认你的电脑已经安装了 node，Vue-cli需要 Node.js支持如果还未安装node可以参考https://www.runoob.com/nodejs

vue-cli脚手架安装----整个项目过程中只需要完整的走一遍即可

安装Nodejs(常规下一步下一步安装即可)
安装完成之后，可以在命令行工具中输入node -v 如果能显示出版本号，就说明安装成功。
安装npm包管理器
npm install -g cnpm --registry
安装完成之后，可以在命令行工具中输入 npm -v,如果能显示出版本号，就说明安装成功。
安装脚手架(vue-cli)
cnpm install -g vue-cli
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存。
　　安装完成后，可以使用vue -V(大写的V)查看vue的版本，来验证vue-cli是否安装成功。
webpack 的安装
cnpm install webpack -g
安装完成后使用 webpack -v 查看是否安装成功，出现对应的版本号则说明已安装成功。

创建项目工程----每新开始一个项目，就绪要重新走一遍(一个完整的项目对应一个模板)

创建项目工程文件夹
cd进入到这个工程文件夹
输入指令：vue init webpack-simple(选择的项目工程的模板) VueDemo1(实际项目的名称)-----回车等待

【按照提示进入项目启动服务】

 cd VueDemo1         ---进入到项目工程中
 npm/cnpm install    ---下载项目
 npm/cnpm run dev    ---启动服务

创建组件：

在src下创建一个components的文件夹
创建需要的组件(首字母大写，后缀.vue)
在需要的地方导入
import 自定义组件名 from "./component/组件.vue"

关联组件

export default{
    components:{
        自定义组件名
    }
}

在视图层使用组件
<自定义组件名></自定义组件名>

路由配置：

如果启动项目，则先终止服务(Ctrl+c)
输入指令：cnpm/npm install vue-router --save
重新启动服务
每一个路由对应一个组件，所以需要在components文件夹中创建对应的组件
在src下创建一个router.config.js的脚本文件用来配置路由
a. 导入所有的组件
b. 配置路由关联组件

           export default{
               routes:[
                   {
                       path:"路径",  ---重定向
                       redirect:"路径"
                   },
                   {
                       path:"路径", 
                       component:组件名,
                       name:""----可选
                   }
               ]
           }

在main.js中配置路由
a.导入下载的路由模块
b.导入路由配置文件router.config.js
c.使用路由
Vue.use(路由)
d.关联路由和路由配置文件
const router = new 路由(router.config.js)
e.挂载路由
6.在组建中使用<router-link to=""></router-link>
在合适的位置替换、添加<router-view></router-view>

了解一下windows下的常用快捷键

ctrl+shift+Esc  打开任务管理器（或者ctrl+alt+delete）
windows+1/2/3...    快速打开任务栏中的应用
windows+方向键  调整当前窗口的位置
alt+F4  关闭当前程序
windows+E   打开文件管器
windows+D   显示桌面
windows+L   锁计算机
windows+R   进入CMD

windows下CMD常用命令

进入某个盘 : 进入d盘 D:

查看目录文件

查看当前目录下的文件 dir
如果是需要查看隐藏文件的或者更多操作的话，可以使用dir /?来查看其它用法

查看本机ip: ipconfig

清除屏幕 cls

复制文件

copy 路径\文件名路径\文件名：把一个文件拷贝到另一个地方。

移动文件

move 路径\文件名路径\文件名：把一个文件移动（就是剪切+复制）到另一个地方。

删除文件，这个是专门删除文件的，不能删除文件夹

del 文件名

ping用来测试网络是否畅通

ping ip(主机名)

进入目录(文件夹)

cd 文件夹

返回上一级 cd…

返回根目录 cd\

中断cmd正在执行的任务按 Ctrl+C

退出cmd，最好不要直接关闭，而是用Ctrl+C中断任务后在关闭，以免造成程序运行异常。

exit

脚手架介绍

前端开发中提到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。
　　在软件开发中（包括前端开发）的脚手架指的是：有人帮你把开发过程中要用到的工具、环境都配置好了，让程序员可以方便地直接开始做开发，专注于业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。
　　比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作者将开发环境大部分东西都配置好，将脚手架下载下来就可以直接开发了，不用再考虑搭建这些工具环境。

Vue CLI 介绍

vue-cli 是一个官方发布 vue.js 项目脚手架，为单页面应用（SPA）快速搭建繁杂的脚手架。VueCLI官方地址
　　GitHub地址是：https://github.com/vuejs/vue-cli

Vue CLI 特性

通过 @vue/cli 搭建交互式的项目脚手架
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
运行时依赖（@vue/cli-service）。该依赖可升级；基于webpack构建，并带有合理的默认配置；可通过项目内的配置文件进行配置；可通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。
　　Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

Vue CLI 的组件

Vue CLI由几个独立的部分组成。在github仓库中同时管理了多个单独发布的包。
（1）CLI:CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。法的原型。也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想
（2）CLI服务:CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
　　CLI服务构建于 webpack 和 webpack-dev-server 之上。

什么是node

根据官方文档可以知道，node就是一个给予谷歌v8引擎的一个javascript的运行时，可以理解为运行js的一个虚拟机。他使用的是一个事件驱动，非阻塞I/O模型，他是将js的运行环境搬到了服务器端，和客户端没有一点关系。是一个纯服务端的东西，node只是为js提供了一个平台。
　　node里面其实还分了两块，一是封装了v8引擎，目的是为了执行es（如定义变量，定义函数等），另外一个提供了大量的工具库,是帮助node实现各种功能的，提供了一些以前js的环境办不到的事情，比如文件操作，网络操作，操作系统的操作。
　　既然node是一个平台（所谓的平台就是用来运行特定语言的），也就意味着node是用来运行语言的，那么java也是语言，node能运行java吗？据nodejs创始人Ryan Dahl回忆，他最初是选择了Ruby这门语言，但是Ruby这门语言的虚拟机效率不怎么样最终放弃了，按照这种思路，貌似node将java的虚拟机集成进来应该可以运行java，但node作者最终选择了javascript。
　　这样js就实现了在服务端运行的可能，js运行在node平台上（分为v8部分，用来执行es，和大量的工具库组件（API）称之为libuv，提供了以前js的环境办不到的事，如文件操作，网络操作等等）。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 
Node.js 的包管理器 npm，是全球最大的开源库生态系统。

node在web中有什么用途

（1）node可以接受客户端用户的所有请求，并且能够快速的给出响应，因此node可以用来做网站。
　　（2）node可以作为一个中间层来来分发调用数据接口，比如有一个网站数据是有java提供的，我们可以让node作为一个中间层，来接受用户的请求，然后通过node来调用java数据接口，获取到数据后直接在node层面做html的瓶装，然后将渲染好的页面直接给用户。为什么要这样做，直接请求java接口不行吗，这是因为node被称之为高性能的web服务器，在并发和抗压方面都比传统的平台要好很多，因此这样一包装可以极大的减轻服务器的开发。
　　通过上面的两点，可以总结出，node在web中要么从前端页面到后端服务全包了，一个是只做其中的一点。
　　node就是一个javascript的运行环境（平台），他不是一门语言，也不是javascript的框架。可以用来开发服务端应用程序，web系统。其特点是体积小，快速，高性能。

npm是什么

简单的说，npm就是JavaScript的包管理工具。类似Java语法中的maven，gradle，python中的pip。

webpack是什么

webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。具体可以自行去 webpack 官网 了解更多，这里不作深入说明。

vue-cli脚手架安装

安装Nodejs(常规下一步下一步安装即可)
安装完成之后，可以在命令行工具中输入node -v 如果能显示出版本号，就说明安装成功。
安装npm包管理器
npm install -g cnpm --registry
安装完成之后，可以在命令行工具中输入 npm -v,如果能显示出版本号，就说明安装成功。
安装脚手架(vue-cli)
cnpm install -g vue-cli
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存。
　　安装完成后，可以使用vue -V(大写的V)查看vue的版本，来验证vue-cli是否安装成功。
webpack 的安装
cnpm install webpack -g
安装完成后使用 webpack -v 查看是否安装成功，出现对应的版本号则说明已安装成功。

创建项目

创建项目工程文件夹(通过命令行进入该文件夹)
输入指令：vue init webpack-simple my-project
-init ：初始化项目。 -webpack-simple：使用的哪个模板，这里选择使用webpack-simple（简单配置的webpack模板）。 -my-project：表示我们项目的名字，这名字可以自己命名，但不要起成系统软件的一些名字，比如vue，node，npm等

项目文件说明：

build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。

	node_modules文件夹：存放npm命令下载的开发环境和生成环境资源包。
　　src文件夹：存放项目源码及需要引用的资源文件。
　　src/assets文件夹：存放项目中需要使用的静态资源文件。
　　src/componnents文件夹：存放vue开发的公共组件。
　　src/router文件夹：vue-router vue路由的配置文件。
　　src/App.vue文件：使用标签<route-view></router-view>渲染整个工程的.vue组件。
　　src/main.js文件：vue-cli工程的入口文件。
　　index.html文件：项目的承载文件（首页文件）。
　　package.json文件：node_modules资源部署、启动、打包项目的npm命令管理。

在webpack-simple模板中，包括webpck模板。一个.vue文件就是一个组件。
　　webpack是将我们所有的资源文件进行打包。同时webpack还能将我们的html（template）、css、js文件通过模板编译的方式将这些文件打包成一个.vue的文件。
　　App.vue代码有三部分，template标签中就是我们要写的组件结构，script标签中就是我们要写的业务逻辑，style标签中就是我们要写的该组件的样式。这三部分，我们通过vue-loader这个插件，将这三部分共同组合成了一个.vue文件。我们称这种.vue的文件就是一个组件。
　　代码中有个export default语法，在es6 Module中，webpack这个工具通过babel-loader这个loader将我们的es6 Module语法进行解析，从而让我们的export default语法和import 'xxx’语法在浏览器中识别。
　　总结：export default xxx 就是抛出一个模块（一个js文件就是一个模块)， import ‘xxx’ from 'aaa’就是从刚刚抛出的文件路径中，导入此模块。有import就一定有export default.
一个组件由三部分组成：template、script、style

v-router安装使用

下载路由：cnpm install vue-router --save
在src目录下新建components文件夹
创建组件
在main.js中配置路由
使用路由

`Pluto.

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue-cli脚手架创建项目全流程----保姆级教程

本篇文章详细讲述就vue脚手架使用安装全过程，在使用vue-cli之前，请确认你的电脑已经安装了 node，Vue-cli需要 Node.js支持如果还未安装node可以参考https://www.runoob.com/nodejsvue-cli脚手架安装----整个项目过程中只需要完整的走一遍即可安装Nodejs(常规下一步下一步安装即可)安装完成之后，可以在命令行工具中输入node -v 如果能显示出版本号，就说明安装成功。安装npm包管理器npm install -g cnpm --reg
复制链接

扫一扫