使用vue-cli搭建spa项目，vue项目结构说明，开发示例，如何修改端口号

目录

1. vue-cli安装

1.1 安装前提

1.2 什么是vue-cli

1.3 安装vue-cli

2. 使用vue-cli构建项目

2.1 使用脚手架创建项目骨架

2.2 到新建项目目录，安装需要的模块

2.3 如何修改端口号

2.4 添加element-ui模块

2.5 package.json详解

3. install命令中的-g, -S, -D参数

4. vue项目结构说明

5.什么是*.vue文件

6. 启动过程

7. 开发示例

7.1 做一个自定义组件Welcome

7.2 增加“用户管理”和“关于我们”组件

7.3 嵌套路由

1. vue-cli安装

1.1 安装前提

在安装vue-cli前需要先确定nodejs环境安装好，验证nodejs环境安装：

  • node -v
  • npm -v

1.2 什么是vue-cli

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。
创建命令：

vue init webpack xxx
  • xxx 为自己创建项目的名称
  • 必须先安装vue,vue-cli，webpack，node等一些必要的环境

1.3 安装vue-cli

命令：

npm install -g vue-cli

安装成功后会在配置的node_global\node_modules目录下会看到vue-cli目录。

在cmd窗口输入如下命令，验证vue安装是否成功，注意：这里的V是大写。如果成功会打印版本号

vue -V

 

2. 使用vue-cli构建项目

2.1 使用脚手架创建项目骨架

在cmd命令窗口，到项目存放目录，运行如下命令：

vue init webpack spa1

spa1为项目名，根据实现输入即可。

注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致, 修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001, 切换回中文：chcp 936, 这两条命令只在当前窗口生效，重启后恢复之前的编码。不能管。

接下来，安装程序会进入一问一答的安装模式：
1）Project name：项目名，默认是输入时的那个名称spa1，直接回车
2）Project description：项目描述，直接回车
3）Author：作者，随便填或直接回车
4）Vue build：选择题，一般选第一个

  • Runtime + Compiler: recommended for most users //运行加编译，官方推荐
  • Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时

5）Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
6）Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N
7）Setup e2e tests with Nightwatch?：是否安装e2e测试 N
8）Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM (选择该项即可)
> Yes, use Yarn
> No, I will handle that myself

全部选择好回车就进行了生成项目，出现如下内容表示项目创建完成
#Project initialization finished!
#========================

2.2 到新建项目目录，安装需要的模块

此步骤类似于maven通过pom文件安装依赖。
命令：

npm install

需要些流量，请使用速度较好的网络。

安装完成后，在命令窗口，到项目目录，运行如下命令：

npm run dev

运行项目， 出现：Your application is running here: http://localhost:8080，表示运行成功，在浏览器地址栏输入http://localhost:8080即可查看。

2.3 如何修改端口号

项目运行时默认使用的是8080端口，如果其他程序也使用该端口则会引发冲突，如果tomcat默认使用的也是8080,为避免冲突需要改变端口号。
打开项目目录下config/index.js文件，修改dev部分的port即可

2.4 添加element-ui模块

添加element-ui时先停掉服务，使用如下命令安装element-ui模块。

npm install element-ui -S

 

注1：使用vue+elementUI创建SPA项目，一般情况下其项目结构组成如下：
* Vue + ESLint + webpack + elementUI + ES6
Vue: 主要框架
* ESLint: 帮助我们检查Javascript编程时的语法错误，这样在一个项目中多人开发，能达到一致的语法
* Webpack: 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。整个项目中核心配置
* elementUI: 是基于vue的一套样式框架，里面有很多封装好的组件样式
* ES6: 全称ECMAScript6.0，是JavaScript的下一个版本标准，2015.06发版

2.5 package.json详解

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
详情见资料“package-详解.json”中的相关注释

3. install命令中的-g, -S, -D参数

命令含义
npm install下载“package.json”中dependencies和devdependencies中配置的所有依赖模块，并保存到项目的node_modules目录
npm install xxx -g全局安装，下载依赖模块，并保存到%node_home%\node_global\node_modules目录下
npm install xxx -S写入到package.json的dependencies对象，并保存到项目的node_modules目录
npm install xxx -D写入到package.json的devDependencies对象，并保存到项目的node_modules目录

注1：在git clone项目的时候，项目文件中并没有node_modules文件夹，为什么呢？
我们知道这个文件中(project_home\node_modules)保存的是我们项目开发中所使用的依赖模块。这个文件夹可能有几百兆大小，如果放到github上，其它人clone的时候会非常慢，这个时候就想到用一个package.json依赖配置文件解决这个问题。这样每个人下载这个项目的时候，只需要进入该项目目录直接npm install npm就会到里面去找需要的函数库，也就是依赖。

缩写命令的全称，注意大小写、-S,-D都是大写

命令简称
installi
--save-S
--save-dev-D
--global-g

4. vue项目结构说明

文件夹文件作用
build这个文件夹主要是进行webpack的一些配置
webpack.base.conf.jswebpack基础配置,开发环境,生产环境都依赖
webpack.dev.conf.jswebpack开发环境配置
webpack.prod.conf.jswebpack生产环境配置
build.js生产环境构建脚本
vue-loader.conf.js此文件是处理.vue文件的配置文件
config文件夹配置文件
dev.env.js配置开发环境
prod.env.js配置生产环境
index.js这个文件进行配置代理服务器，例如：端口号的修改
node_modules存放npm install时根据package.json配置生成的npm安装包的文件夹
src文件夹源码目录(开发中用得最多的文件夹)
assets共用的样式、图片
components业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
router设置路由
App.vuevue文件入口界面
main.js对应App.vue创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
static文件夹存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置，对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用
package.json这个文件有两部分是有用的：scripts 里面设置命令以及在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

5.什么是*.vue文件

*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。

注意：
1）不能直接将HTML代码包裹在<template></template>中，而是必须在里面放置一个html标签来包裹所有的代码，一般情况下使用<div></div>标签包含其他代码，也可以使用其他标签，只要有一个根元素即可。

<template><div>...</div>
</template>

2）js代码写在<script>标签中，并通过export导出

<script>export default {name: 'App'}
</script>

6. 启动过程

流程示意图：

1） 在执行npm run dev的时， 会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件，包含项目的名称版本、项目依赖等相关信息。
2） 从package.json文件中可以看到，启动npm run dev命令后，会加载build/webpack.dev.conf.js 配置并启动 webpack-dev-server
3） webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。

const config = require('../config')

 4） config目录下的index.js文件中包含了host和port等启动服务必须的配置信息，默认端口号可以在这个配置文件中修改。在该文件中如下配置：

index: path.resolve(__dirname, '../dist/index.html'),

配置中的index.html就是项目根目录下的index.html文件。
5） index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
6） main.js中，引入了vue，App和router模块，创建一个vue实例，并把App.vue模块的内容挂载到index.html的id为app的div标签下，并绑定了一个路由配置。
7） main.js把App.vue模块的内容，放置在index.html的div标签下，查看App.vue的内容，这个页面的内容有一个logo和一个<router-view/>，<router-view/>的内容由router配置决定。
8） router目录下的index.js文件是配置路由的地方。从配置中看到在访问路径"/"的时候，会将HelloWorld模板的内容放置到上面提到的<router-view/>中去。
9） HelloWorld中主要是一些vue的介绍信息。
10） 页面的组成关系：index.html --(包含)--> App.vue --(包含)--> HelloWorld.vue

7. 开发示例

7.1 做一个自定义组件Welcome

1） 在components下创建一个Welcome.vue自定义组件

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {name: 'Welcome',//组件的数据对象必须是函数形式定义//在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的//HelloWord中为简写形式data: function() {return {msg: 'Welcome to my App'}}
}
</script><!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {font-weight: normal;
}
</style>

2） 在router/index.js中配置路由，配置路由时要注意先导入组件

import Welcome from '@/components/Welcome'export default new Router({routes: [{path: '/HelloWorld',name: 'HelloWorld',component: HelloWorld},{path: '/',name: 'Welcome',component: Welcome}]
})

我们将默认显示的HelloWorld，修改为了Welcome组件。运行系统观察页面展示。

7.2 增加“用户管理”和“关于我们”组件

在src下新增新增一个views目录，用于存放业务组件，components用来方法公用组件。

1）定义About组件

<template><!--必须有一个根节点--><div><h1>关于我们</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'About',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

2）定义UserMsg组件

<template><!--必须有一个根节点--><div><h1>用户管理</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserMsg',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

3）在router/index.js中定义路由，配置路由时要注意先导入组件

import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....{path: '/About',name: 'About',component: About},{path: '/UserMsg',name: 'UserMsg',component: UserMsg}

4）在Welcome组件中加入router-link，配置路由路径，修改后的内容如下：

<template><div class="hello"><h1>{{ msg }}</h1><p><router-link to="/UserMsg">用户管理</router-link><router-link to="/About">关于我们</router-link></p><!-- 这里的配置的router-view是没有效果的，起效的时候App.vue中的router-view，这一点通过页面效果可以看出来，在点击“用户管理”或“关于我们”后，msg定义的提示信息没了，但vue的logo还在。<div><router-view/></div> --></div>
</template><script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {name: 'Welcome',//组件的数据对象必须是函数形式定义//在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的//HelloWord中为简写形式data: function() {return {msg: 'Welcome to my App'}}
}
</script>

7.3 嵌套路由

在用户管理模块下，创建用户注册，修改密码，以此演示嵌套路由

1） 创建用户注册

<template><!--必须有一个根节点--><div><h1>用户注册</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserRegister',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

2）密码修改

<template><!--必须有一个根节点--><div><h1>修改密码</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserPwdUpdate',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

3）配置路由
配置路由前，先导入组件

import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'

配置路由：

 //此处只显示了用户管理部分路由配置，为嵌套路由{path: '/UserMsg',name: 'UserMsg',component: UserMsg,//注意children单词不要写错，如果写错程序不会报错，但效果出不来!!!!//以"/" 开头的嵌套路径会被当作根路径，所以子路由的path不需要添加 "/" !!children: [{path: 'UserRegister',name: 'UserRegister',component: UserRegister},{path: 'UserPwdUpdate',name: 'UserPwdUpdate',component: UserPwdUpdate}]}

4）在用户管理组件中（UserMsg）加入router-link，配置路由路径，增加后的组件如下：

<template><!--必须有一个根节点--><div><h1>用户管理</h1><p><router-link to="/UserMsg/UserRegister">用户注册</router-link><router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link></p><div><!--用户注册于密码修改为用户管理的子模块，所以在用户管理组件中使用router-view用于展示用户注册与密码修改组件。如果此处不用则点击用户注册与密码修改时没有任何效果--><router-view/></div></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserMsg',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/120425.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

目标检测技术概述

目标检测技术概述

什么是目标检测&#xff1f; 在计算机视觉众多的技术领域中&#xff0c;目标检测&#xff08;Object Detection&#xff09;也是一项非常基础的任务&#xff0c;图像分割、物体追踪、关键点检测等通常都要依赖于目标检测。在目标检测时&#xff0c;由于每张图像中物体的数量、…
阅读更多...
云游数智农业世界，体验北斗时空智能

云游数智农业世界，体验北斗时空智能

今日&#xff0c;2023年中国国际农业机械展览会在武汉正式拉开帷幕&#xff0c;众多与会者云集&#xff0c;各类农机产品纷呈&#xff0c;盛况空前。 千寻位置作为国家北斗地基增强系统的建设与运营方&#xff0c;在中国国际农业机械展览会上亮相&#xff0c;以「北斗时空智能 …
阅读更多...
代码审计及示例

代码审计及示例

简介&#xff1a; 代码安全测试是从安全的角度对代码进行的安全测试评估。 结合丰富的安全知识、编程经验、测试技术&#xff0c;利用静态分析和人工审核的方法寻找代码在架构和编码上的安全缺陷&#xff0c;在代码形成软件产品前将业务软件的安全风险降到最低。 方法&#x…
阅读更多...
合成数据的好处和用途

合成数据的好处和用途

在不断变化的数据科学和人工智能环境中&#xff0c;合成数据集的概念成为具有多种用途的强大工具。 假设您是一名数据科学家&#xff0c;并分配了为电子商务网站创建尖端推荐系统的任务。为此&#xff0c;您需要大量的用户交互数据。但是&#xff0c;您面临着保护用户隐私和处…
阅读更多...
Lua入门使用与基础语法

Lua入门使用与基础语法

文章目录 目的基础说明开发环境基础语法注释数据类型变量流程控制函数 总结 目的 Lua是一种非常小巧的脚本语言&#xff0c;基于C构建并且完全开源&#xff0c;可以方便的嵌入到各种项目中&#xff0c;当然也可以单独使用。Lua经常被用在很多非脚本语言的项目中&#xff0c;用…
阅读更多...
设计模式—创建型模式之单例模式

设计模式—创建型模式之单例模式

设计模式—创建型模式之单例模式 介绍 单例模式说明&#xff1a;一个单一的类&#xff0c;负责创建自己的对象&#xff0c;同时确保系统中只有单个对象被创建。 单例模式特点&#xff1a; 某个类只能有一个实例&#xff1b;&#xff08;构造器私有&#xff09;它必须自行创…
阅读更多...
Redis 主从

Redis 主从

目录 ​编辑一、构建主从架构 1、集群结构 2、准备实例和配置 &#xff08;1&#xff09;创建目录 &#xff08;2&#xff09;修改原始配置 &#xff08;3&#xff09;拷贝配置文件到每个实例目录 &#xff08;4&#xff09;修改每个实例的端口&#xff0c;工作目录 &a…
阅读更多...
虹科分享 | 买车无忧?AR带来全新体验!

虹科分享 | 买车无忧?AR带来全新体验!

文章来源&#xff1a;虹科数字化与AR 阅读原文&#xff1a;https://mp.weixin.qq.com/s/XsUFCTsiI4bkEMBHcGUT7w 新能源汽车的蓬勃发展&#xff0c;推动着汽车行业加速进行数字化变革。据数据显示&#xff0c;全球新能源汽车销售额持续上升&#xff0c;预计到2025年&#xff0…
阅读更多...
MySQL初始化之后启动报错(mysqld: Table ‘mysql.plugin‘ doesn‘t exist）

MySQL初始化之后启动报错(mysqld: Table ‘mysql.plugin‘ doesn‘t exist）

报错场景 初始化之后&#xff0c;服务无法启动。错误日志error-log 报错如下&#xff1a;&#xff08;mysql库下的系统表不存在&#xff09; 2023-10-26T06:03:08.150163-00:00 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started. 2023-10-26T06:03:08.496…
阅读更多...
javascript原生态xhr上传多个图片，可预览和修改上传图片为固定尺寸比例，防恶意代码，加后端php处理图片

javascript原生态xhr上传多个图片，可预览和修改上传图片为固定尺寸比例，防恶意代码，加后端php处理图片

//前端上传文件 <!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml" lang"UTF-8"></html> <html><head><meta http-equiv"Content-Type" content"text/html;charsetUTF-8;"/><title…
阅读更多...
关于前端如何下载后端接口返回content-type为application/octet-stream的文件

关于前端如何下载后端接口返回content-type为application/octet-stream的文件

关于前端如何下载后端接口返回response-type为application/octet-stream的文件 问题描述 后端接口定义为直接返回一个文件&#xff0c;如果带认证信息可以直接通过浏览器url下载&#xff0c;但是接口需要传headers认证信息&#xff0c;url上又不支持传相关信息 解决 前端…
阅读更多...
p5.js map映射

p5.js map映射

本文简介 带尬猴&#xff0c;我嗨德育处主任 p5.js 为开发者提供了很多有用的方法&#xff0c;这些方法实现起来可能不难&#xff0c;但却非常实用&#xff0c;能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。 什么是映射 从 p5.js 文档 中可…
阅读更多...
N-129基于springboot,vue学生宿舍管理系统

N-129基于springboot,vue学生宿舍管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vuevue-element-admin 服务端技术&#xff1a;springboot,mybatis…
阅读更多...
Redis 主从复制和哨兵监控，实现Redis高可用配置

Redis 主从复制和哨兵监控，实现Redis高可用配置

文章目录 一、概述二、主从复制模拟说明三、准备配置文件四、启动Redis实例五、主从复制配置5.1 命令方式启用和取消主从复制5.2 配置文件方式启用和取消主从复制5.3 测试主从复制5.4 有其主从复制的其他参数配置 六、Sentinel 配置6.1 Sentinel 的作用6.2 Sentinel 监控说明6.…
阅读更多...
关于网络安全运营工作与安全建设工作的一些思考

关于网络安全运营工作与安全建设工作的一些思考

以下内容是个人成长过程中对于网络安全运营工作的理解和思考&#xff0c;希望通过这篇文章帮助大家更好的去做安全运营体系化建设&#xff0c;开始吧&#xff01; 文章目录 一、网络安全运营是什么&#xff1f;二、网络安全运营建设阶段第一阶段&#xff1a;设备限制阶段第二阶…
阅读更多...
基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】

基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】

基于springboot实现校园交友网站管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生…
阅读更多...
JVM思维导图

JVM思维导图

阅读更多...
iStat Menus v6.72

iStat Menus v6.72

iStat Menus是一款Mac电脑上的系统监控工具&#xff0c;它可以帮助用户监测电脑的硬件和软件状况&#xff0c;提供实时的系统数据和统计信息。 其主要特点包括&#xff1a; 1.系统监测&#xff1a;iStat Menus可以监测CPU、内存、硬盘、网络、电池等系统参数&#xff0c;方便…
阅读更多...
性能测试基本知识

性能测试基本知识

性能测试基本知识 一、什么是性能测试 使用自动化工具&#xff0c;模拟不同的场景&#xff0c;对软件各项性能指标进行测试和评估的过程就是性能测试。 1. 后台处理程序的性能&#xff08;代码性能&#xff09; 2. 中间件、数据库、架构设计等是否存在瓶颈 3. 服务器资源消耗…
阅读更多...
java springboot2.7 写一个本地 pdf 预览的接口

java springboot2.7 写一个本地 pdf 预览的接口

依赖方面 创建的是 接口web项目就好了 然后包管理工具打开需要这些 import org.springframework.core.io.FileSystemResource; import org.springframework.core.io.Resource; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; imp…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023