用vue-cli构建vue项目步骤的详细说明

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

构建vue项目最简单的方法是使用脚手架工具vue-cli。前端的三个框架都有自己的脚手架工具，其功能是用配置好的模板快速搭建项目，省去了自己配置webpack配置文件的基本内容，大大降低了初学者搭建项目的难度。在这一节中，我们将看看如何使用vue-cli来构建vue项目，并具体分析构建项目。

一、环境建设

节点和npm是必不可少的，这里不再介绍。

1.安装vue-cli

$ npm install -g vue-cli检查安装是否成功：

$ vue - version3.3.0！-更多-

2.构建项目

在$ vue init webpack hello-vue的初始化过程中，会有一个交互选项供你根据项目需求选择项目的一些配置。为了便于演示以下教程，可以统一选择以下选项：

？项目名称hello-vue #项目名称？项目描述A Vue.js项目#项目描述？作者深空[电子邮件受保护] #作者？当Vue构建独立#运行编译时？安装vue路由器？是#安装vue-router？使用ESLint来清理你的代码？是#使用ESLint作为代码规范？挑选一个ESLint预置Airbnb #选择Airbnb的代码规范？设置单元测试是#安装单元测试？挑选一个测试跑者因果报应#测试模块？用守夜人设置e2e测试？是#安装e2e测试？项目创建后，我们应该为您运行“npm安装”吗？(推荐)npm #包管理器，npm施工完成后，会提示施工成功消息：

#项目初始化完成！#===========================要开始使用：cd hello-vue NPM run dev文档可以在https://vuejs-templates.github.io/webpack3,启动项目中找到

默认情况下，$ cd hello-vue$ npm run dev项目将从端口8080开始。如果端口被占用，它会自动调整端口。打开浏览器并输入：http://localhost:8080，您将看到构建项目的主页：

4.目录结构

用编辑器打开它(建议使用VSCode)。让我们具体看看目录结构：

package.json :

{ ' scripts ' : { ' dev ' : ' web pack-dev-server-inline-progress-config build/web pack . dev . conf . js '，' start': 'npm run dev '，' unit ' : ' cross-ENV BABEL _ ENV=Test karma start Test/unit/karma . conf . js-single run '，' e2e ' : ' node Test/e2e/runner . js '，Test' :' NPM run unit NPM run e2e '，' lint 'vue src test/unittest/e2e/specs '，' build ' : ' node build/build . js ' } }在package.json中

Npm run dev:在项目开发阶段启动项目的命令；Npm运行lint:使用eslint检查代码格式；Npm运行测试：单元测试和e2e测试；npm测试运行e2e : e2e；Npm run build:当开发完成时，它会将我们的源代码编译成最终的发布代码，该代码将在项目根目录下的dist文件夹中生成(在项目初始化时不会生成)。配置：保存一些项目初始化配置。

构建：它存储了webpack的一些初始化配置。

Index.html :是我们的主页。索引经常被预设为首页，比如index.htm和index.php。

Src :是保存项目源代码的地方。我们将在下面详细分析这个文件夹中的文件。

二、代码分析

Vue的核心架构分为路由和组件两部分。其实React也是一样的。当我们切入一个项目时，我们都是从这两点开始的。让我们具体看看src文件夹。

1.入境文件

如果我们在项目根目录下的构建目录中打开webpack.base.conf.js，我们将看到以下代码(第22行):

module . exports={ context : path . resolve(_ _ dirname，'./')，entry : { app 3360 }。/src/main.js'}，//.}表示我们的入口文件是src目录下的main.js文件。看看代码：

//要用“import”命令加载的Vue构建版本//(仅运行时或独立)已在webpack.base.conf中用别名设置。从“Vue”导入Vue；从“”导入应用程序。/App '；从“”导入路由器。/router '；vue . config . production tip=false；/* ESL int-禁用no-new */new Vue({ el: '#app '，路由器，组件： { App }，模板： 'App/'，})；看看这里发生了什么：

介绍Vue，叫它Vue。在根目录下引入App.vue文件(是否需要后缀名称)，在路由器文件下引入index.js文件(文件夹后面没有具体的文件，但默认是index.js文件)通过new实例化vue实例。实例化时声明了几个属性：El:“# app”:意思是把所有视图放在id值为app的dom元素中，也就是项目根目录下index.html的div : div ID=' app '/div；Components: { App }:表示上面介绍的App.vue文件的内容会写入div id='app'/div，标签为App/；开始的时候，我们没有介绍Vue使用虚拟DOM，所以从这个可以看出Vue也使用虚拟DOM(和React一样)。

下面简单介绍一下虚拟DOM:我们在修改应用程序的时候，不会改变DOM，而是以JavaScript数据结构的形式创建一个DOM的副本，并插入到文档中。每当进行任何更改时，都会更改JavaScript数据结构，并将后者与原始数据结构(diff算法)进行比较，然后将最终更改更新为真实的DOM。我们都知道DOM非常重，所以虚拟DOM非常节省性能。2、应用软件

我们已经知道App.vue的功能：单页应用程序的主要组件。所有页面都是在App.vue下通过路由进行切换的因此，我们可以理解所有路由也是App.vue的子组件让我们看看代码：

模板div id='app' img src='http:/assets/logo . png ' router-view///div/templatescript export default { name : ' App '，}；/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；边距-top : 60px；}/style这里需要提一下：node之所以能以*的格式识别文件的原因。vue是webpack从*中提取html、js和css。编译时形成新的独立文件。您可以通过npm run build命令编译源代码，并检查dist file下的文件进行验证。App.vue的内容分为三个部分：模板./模板，脚本./脚本，样式./style，结构、脚本和样式都写在这三个标签中。

让我们从模板开始：有一个用img标签和路由器视图标签包装的div。如前所述，App.vue是单页应用的主要组件。与浏览器中打开的主应用页面相比，img标签是页面顶部Vue的logo。那么下面的内容去了哪里呢？是否与路由器视图/？是时候看看路线了。

3、路由器/索引. js

从“Vue”导入Vue；从“vue-router”导入路由器；从“@/components/HelloWorld”导入hello world；使用路由器；导出默认的新路由器({ routes: [ { path: '/'，name: 'HelloWorld '，component: HelloWorld，}，]，})；首先介绍了路由插件vue-router，然后明确声明了路由Vue.use(Router)。路由配置非常明确：不同的组件(或页面)被分配到不同的路径，参数名称仅用于标识。

当我访问根路由http://localhost:8080/#/时，App.vue中的router-view/会将导入的HelloWorld组件分配给我，并将其放在img标签下。在组件目录中打开HelloWorld.vue查看具体内容。

当我们在浏览器中看到网址时，我们会感到奇怪。为什么要在后面加一个#号？原因是vue-router默认哈希模式——使用URL的哈希来模拟一个完整的URL，当URL发生变化时，页面不会重新加载。参见：https://router . vuejs . org/zh/guide/essentials/history-mode . html，这里可以跳过这一点。现在，当我们在浏览器中访问地址http://localhost:8080/#/Vue时，会发现只出现了Vue的logo。这是因为我们没有配置路由/vue。如果我们找不到路由，标签路由器视图/将不会被加载。

此时，我们知道路由如何根据url分配不同的组件。配置多条路由很简单：

导出默认的新路由器({ routers :[{ path : '/'，名称： 'HelloWorld '，组件： HelloWorld }，{ path: '/about '，名称：' about '，组件： about}，{path :'/VUE '，名称：' VUE '，组件： VUE}]})如果您想访问http://localhost 33608080该怎么办

导出默认的新路由器({ routers :[{ path : '/'，名称： 'HelloWorld '，组件： HelloWorld，}，{ path: '/about '，名称： 'about '，组件：}，{ path: '/vue '，名称： 'vue '，组件： Vue，子级： [ { path: '/demo向路由再添加一个子路由配置。

4、资产

用于存储图片、样式等一些静态文件。

三.摘要